95

I have a Flask back-end with API routes which are accessed by a React single page application created using create-react-app. When using the create-react-app dev server, my Flask back end works.

I would like to serve the built (using npm run build) static React app from my Flask server. Building the React app leads to the following directory structure:

- build
  - static
    - css
        - style.[crypto].css
        - style.[crypto].css.map
    - js
        - main.[crypto].js
        - main.[crypto].js.map
  - index.html
  - service-worker.js
  - [more meta files]

By [crypto], I mean the randomly generated strings generated at build time.

Having received the index.html file, the browser then makes the following requests:

- GET /static/css/main.[crypto].css
- GET /static/css/main.[crypto].css
- GET /service-worker.js

How should I serve these files? I came up with this:

from flask import Blueprint, send_from_directory

static = Blueprint('static', __name__)

@static.route('/')
def serve_static_index():
    return send_from_directory('../client/build/', 'index.html')

@static.route('/static/<path:path>') # serve whatever the client requested in the static folder
def serve_static(path):
    return send_from_directory('../client/build/static/', path)

@static.route('/service-worker.js')
def serve_worker():
    return send_from_directory('../client/build/', 'service-worker.js')

This way, the static assets are successfully served.

On the other hand, I could incorporate this with the built-in Flask static utilities. But I do not understand how to configure this.

Is my solution robust enough? Is there a way to use built-in Flask features to serve these assets? Is there a better way to use create-react-app?

2
  • 4
    flask should know about your static folder without you having to do anything (as long as the folder is named static and is next to your flask entrypoint) ... ie cp -rf /build/static ./static as part of your build script ... May 26, 2017 at 21:06
  • 1
    you can also use nginx to serve your static files, which is usually the recommended via (nginx is super good for static files)
    – patrick
    Jun 28, 2017 at 15:53

5 Answers 5

112
import os
from flask import Flask, send_from_directory

app = Flask(__name__, static_folder='react_app/build')

# Serve React App
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists(app.static_folder + '/' + path):
        return send_from_directory(app.static_folder, path)
    else:
        return send_from_directory(app.static_folder, 'index.html')


if __name__ == '__main__':
    app.run(use_reloader=True, port=5000, threaded=True)

Thats what I ended up with. So bascially catch all routes, test if the path is a file => send file => else send the index.html. That way you can reload the react app from any route you wish and it does not break.

7
  • 3
    I'm getting mime type errors with this solution :-( The script has an unsupported MIME type ('text/html'). /service-worker.js Failed to load resource: net::ERR_INSECURE_RESPONSE registerServiceWorker.js:71 Error during service worker registration: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').
    – ketysek
    Mar 8, 2018 at 22:55
  • @user3216673 it most likely is not an issue with flask or create-react-app but with your Browser. A guess in the wild: unregister your service workers might resolve the issue.
    – Jodo
    May 4, 2018 at 6:54
  • 1
    You can use app.static_folder to keep your code DRY
    – Eytan
    Apr 13, 2019 at 12:38
  • 1
    In case you want to serve the app from a sub-path, instead of the root. (like in my case) You can do @app.route('/app', defaults={'path': ''}) @app.route('/app/<path:path>') and then in your CRA app package.json add homepage: "./app" May 18, 2022 at 23:05
  • Works, altough no full idea of what's going on heehe
    – imbr
    May 9 at 13:03
19

First do npm run build to build the static production files as mentioned by you above

from flask import Flask, render_template

app = Flask(__name__, static_folder="build/static", template_folder="build")

@app.route("/")
def hello():
    return render_template('index.html')

print('Starting Flask!')

app.debug=True
app.run(host='0.0.0.0')

Unfortunately, I don't think you can get it work with the development hot-reload.

19

A working solution here. Ever thought why we need two separate folders for static and templates. To segregate the mess, right? But, it's a problem with the production build since it has one folder for both static and templates type of files and all dependencies are linked like that.

The build folder will be served if you consider it both static and templates.

Use something like this

from flask import Flask, render_template

app = Flask(__name__, static_url_path='',
                  static_folder='build',
                  template_folder='build')

@app.route("/")
def hello():
    return render_template("index.html")

Your flask app will run fine.

2
  • 2
    This answer saved me. All the others had some caveats that didn't fit my setup.
    – user362178
    Mar 9, 2020 at 17:39
  • 2
    That static_url_path='' is what made it work for me. Feb 4, 2022 at 18:43
3

The accepted answer does not work for me. I have used

import os

from flask import Flask, send_from_directory, jsonify, render_template, request

from server.landing import landing as landing_bp
from server.api import api as api_bp

app = Flask(__name__, static_folder="../client/build")
app.register_blueprint(landing_bp, url_prefix="/landing")
app.register_blueprint(api_bp, url_prefix="/api/v1")


@app.route("/")
def serve():
    """serves React App"""
    return send_from_directory(app.static_folder, "index.html")


@app.route("/<path:path>")
def static_proxy(path):
    """static folder serve"""
    file_name = path.split("/")[-1]
    dir_name = os.path.join(app.static_folder, "/".join(path.split("/")[:-1]))
    return send_from_directory(dir_name, file_name)


@app.errorhandler(404)
def handle_404(e):
    if request.path.startswith("/api/"):
        return jsonify(message="Resource not found"), 404
    return send_from_directory(app.static_folder, "index.html")


@app.errorhandler(405)
def handle_405(e):
    if request.path.startswith("/api/"):
        return jsonify(message="Mehtod not allowed"), 405
    return e


0

I used a flask server with only one route / which read the index.html file from the build folder of Create react app(CRA)

from flask import Flask
app = Flask(__name__)
app.static_folder =  '../build'

@app.route('/')
def index():
    fref = open(r'../build/index.html')
    html_text = fref.read()
    fref.close()
    return html_text

app.run()

Setting up this way I faced an error, the static files are not properly served due to path mismatch, so the solution I used is

  1. Add a homepage property in package.json of CRA and set it to "/static"

{ "name":"App-name", "version":"", "dependencies":{} "homepage":"/static",....[other keys]}

 Add **homepage** key parallel to the **dependencies** key in the package.json file
  1. This homepage property will be used during the build process of CRA and used in the place of %PUBLIC_URL% of index.html and gets appended to other static assets URL path (you can verify by viewing the index.html code after the build process)

  2. After the build process, run the flask server,we can see the GET request coming with / for the first time and index.html will be served and followed by requests /static/static/js/[[filename]] for other static assets from HTML file and everything works correctly

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.