How to serve create-react-app from Flask?

Question

How can I serve the deliverables of create-react-app via Flask?

After npm run build, this is roughly my folder tree:

src/
├── service/
│   └── app.py
└── content/
    ├── static
    │   ├── css
    │   │   └── many css files...
    │   ├── js
    │   │   └── many js files...
    │   └── media
    │       └── some images...
    ├── index.html
    ├── service-worker.js
    └── manifest.json

That's the server's code:

app = Flask(__name__, template_folder='../content', static_folder='../content')

@app.route('/')
def home():
    return flask.render_template('index.html')

@app.route('/static/<path:path>')
def static_files(path):
    return flask.send_from_directory('../content/static', path)

if __name__ == '__main__':
    app.run(debug=True)

The main html, index.html is served successfully. So are all the files under content/static/.

The files under content/ however (except index.html), are not delivered at all (error 404, not found).

Are you sure the directory listing you gave is correct. The flask code mentions a build/ directory but this doesn't appear in the directory listing? — v25
– v25, Commented Jan 15, 2020 at 17:18
@v25, thanks, I updated the question (and also double-checked it in my own environment). — Tar
– Tar, Commented Jan 15, 2020 at 17:25

v25 · Accepted Answer · 2020-01-15 19:18:47Z

1

Assuming you're just trying to serve a bunch of static files, that could probably be done more efficiently with a webserver like nginx.

However if you do wish to use Flask, the simplest way to do this with your exisiting directory structure is:

from flask import Flask, render_template

app = Flask(__name__,
            static_url_path='', 
            static_folder='../content')

@app.route('/')
def index_redir():
    # Reached if the user hits example.com/ instead of example.com/index.html
    return render_template('index.html')

This essentially serves everything in the contents/ directory statically at the / endpoint (thanks to the static_url_path being set to an empty string)

Of course there's also the index_redir function which will render index.html if the user actually hits example.com/ instead of example.com/index.html.

This also avoids defining the static_files function from your code, as flask has the functionality to serve static files out of the box.

Again this stuff is probably better suited to nginx in a production env.

edited Jan 15, 2020 at 19:18

answered Jan 15, 2020 at 18:01

v25

7,6912 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tar Over a year ago

It worked once I added template_folder='../content'. Thanks!

Collectives™ on Stack Overflow

How to serve create-react-app from Flask?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related