How can flask serve the react public files

Question

In react, I created a folder ./public/assets, and put an image in the ./public/assets. Everything works well when I run npm start. After running npm run build in react, I get a ./build folder. I copied files and folders inside the ./build folder to a flask folder. Since the index.html should be put in ./templates in flask, the browser can't get the image in flask ./assets.

The files in flask:

.
├── app.py
├── asset-manifest.json
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── manifest.json
├── precache-manifest.28e9dd49c9646209098c5bb088bdb16f.js
├── service-worker.js
├── static
│   ├── css
│   │   ├── main.2cce8147.chunk.css
│   │   └── main.2cce8147.chunk.css.map
│   ├── js
│   │   ├── 2.38e0f74c.chunk.js
│   │   ├── 2.38e0f74c.chunk.js.map
│   │   ├── main.1c5ab122.chunk.js
│   │   ├── main.1c5ab122.chunk.js.map
│   │   ├── runtime~main.a8a9905a.js
│   │   └── runtime~main.a8a9905a.js.map
│   └── media
│       └── logo.5d5d9eef.svg
└── templates
    └── index.html

the folders in react/public:

.
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── index.html
└── manifest.json

the files in react/build

.
├── asset-manifest.json
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.28e9dd49c9646209098c5bb088bdb16f.js
├── service-worker.js
└── static
    ├── css
    │   ├── main.2cce8147.chunk.css
    │   └── main.2cce8147.chunk.css.map
    ├── js
    │   ├── 2.38e0f74c.chunk.js
    │   ├── 2.38e0f74c.chunk.js.map
    │   ├── main.1c5ab122.chunk.js
    │   ├── main.1c5ab122.chunk.js.map
    │   ├── runtime~main.a8a9905a.js
    │   └── runtime~main.a8a9905a.js.map
    └── media
        └── logo.5d5d9eef.svg

Is there any solution that can configure the public path so that the ./public folder will be put into ./build/static?

I use send_from_directory in flask backend to serve the files in ./assets. But I would like to put files to ./build/static folder when I run npm run build, including the files favicon.ico, manifest.json and so on.

Answer 1

If you have a build directory like this inside the flask app:

.
|
|_build
|    |_static
|       |_css
|       |_js
|       |_img
|    |_index.html
|_serve.py

With a serve.py like this:

from flask import Flask, render_template, send_from_directory


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


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


@app.route("/manifest.json")
def manifest():
    return send_from_directory('./build', 'manifest.json')


@app.route('/favicon.ico')
def favicon():
    return send_from_directory('./build', 'favicon.ico')


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

Reference: https://flask.palletsprojects.com/en/1.1.x/patterns/favicon/

I think it will work.

Full directory tree (tested here locally):

.
├── README.md
├── build
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── precache-manifest.054774adbe886ee6e3c29227ef1745b5.js
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.2cce8147.chunk.css
│       │   └── main.2cce8147.chunk.css.map
│       ├── js
│       │   ├── 2.b41502e9.chunk.js
│       │   ├── 2.b41502e9.chunk.js.map
│       │   ├── main.28647029.chunk.js
│       │   ├── main.28647029.chunk.js.map
│       │   ├── runtime~main.a8a9905a.js
│       │   └── runtime~main.a8a9905a.js.map
│       └── media
│           └── logo.5d5d9eef.svg
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── serve.py
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

In this case, I merged the flask and the react app in the same directory. You can put in different directories and then just move the build dir to the root of the flask app. Or do like this suggestion like this.

EDIT (another option to do it):

You can also edit your public directory to look like this:

public/
├── index.html
└── static
    ├── favicon.ico
    └── manifest.json

Note you should also change your index.html to have:

<link rel="manifest" href="%PUBLIC_URL%/static/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" />

Then, when you run yarn build you will have the favicon.ico and manifest.json inside the static directory. No need to have the custom routes on flask for this.