This article aims at describing how to serve a react application created using create-react-app
with a Flask backend server. In other words, I will explain how to use Flask as your backend and React as your frontend all served through Flask.
Key terms
create-react-app: This a tool (built by developers at Facebook) that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. You run one command, and Create React App sets up the tools you need to start your React project.
Flask: This a micro web framework written in python.
This article is suitable for anyone with a basic understanding of Python/flask and React and wants to explore how to build a full-stack web app using python-flask and React.
You can find the full implementation and code used in this article on this GitHub repository.
Requirements
- yarn
- Virtualenv
- Flask
- create-react-app
Let’s get started:
Install requirements
- Download node for your operating system. Installing node will install
npm
as well. - Since we are going to use
yarn
as our package manager, go to your terminal and install yarn using this commandnpm install -g yarn
. - Use yarn to install the other required packages. Run this command on your terminal
yarn global add create-react-app react-scripts
. - Open your project directory in your favorite IDE.
- Run
create-react-app react-app
to create your react application. You can give the react app any name of your choice, but for this article, we are going to use react-app. - Activate your virtual environment and Install Flask using
pip install flask
.
The initial project set up
. ├── README.md ├── README.md └── flask-server/ └──static/ └──templates/ └── main.py └── react-app/ └── node_modules/ └── public/ └── src/
The react-app folder is the react application we created above with create-react-app
command, flask-server/static
folder is the path to where we shall build our react application, flask-server/templates
will contain our HTML file from the react app, and the main.py
file will contain our flask application.
Create the Flask app
Open your main.py
file and paste the code below.
from flask import (Flask, render_template) app = Flask("__main__") @app.route("/") def my_index(): return render_template("index.html", flask_token="Hello world") app.run(debug=True)
Unpack webpack
To unpack webpack, make sure you are in the react-app directory and run this command; npm run eject
. What this does is that it gives us access to the config files. It unpacks webpack.config.js
as well as paths.js
, which we are going to use to configure our build process.
Change building path
After unpacking webpack, you will notice a new folder created under react-app called config
. We can now go ahead and edit our paths.js
file by changing where we are building to. This can be achieved by changing our appbuild
entry to the actual path where we want our files to go. Replace the appbuild
entry with this line of code below.
appBuild: resolveApp('../flask-server/static/react'),
As you recall above, we created the static
folder under the flask-server
folder to contain the react application build. You also notice that I have added the react
folder to the app build path because I wouldn’t want to build directly into the static folder that is why I have chosen to put the files under a sub-heading of react. Hence, after a complete build of the react application, you will notice that all the files will be in the react folder that will be created.
Edit webpack file
Open webpack.config.js
file, you will notice there is a lot of static\
. What we want to do is to get rid of all of them. You can do this manually or use your editor to search for all of them and delete them at once. The next thing we need to do is to tell webpack where to put our HTML files. Got to the HtmlWebpackPlugin
and add a file name to your config, as shown below;
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
filename: "../../templates/index.html", //added line
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
Make React interact with Flask
Open index.html
, which is found in this path\react-app\public\index.html
. After the title tag, add a script tag shown below.
<script> window.token="{{flask_token}}"</script>
NB. The flask_token
is passed in through our flask backend. It is then accessible anywhere in our react app under window.token
.
Let’s go into our App.js
file, which is found in this path \react-app\src\App.js
and add the line of code below to call out our token.
<p>My Token = {window.token}</p>
Tell React where to put the links to our javascript and CSS
Go to package.json
file and add a new variable called homepage
as, shown below.
"homepage": "/static/react",
Let’s now run our build using this command npm run build
. You will notice the new files that got populated in our \flask-server\static\
folder. Then\flask-server\templates\
will contain the index.html
file.
Finally, Run the flask application.
Change your Command-line directory to flask-server
and run python3 main.py
. Go to`http://localhost:5000/` to make sure your application runs as expected. If you have been building your application following this tutorial, compare it with the image below.

NB: There is a drawback of losing the hot reload offered by the built-in debug server of NPM; hence, every time you make changes to the react app, you need to build it again with npm run build
command to see the changes in your app.
Learning tools
- https://stackoverflow.com/questions/44209978/serving-a-create-react-app-with-flask
- https://www.pranaysite.com/flask-and-react/
Reflection
As a Python developer, I got curious about how I could serve a react app created by create-react- app
with a flask server. And with this curiosity, I was able to achieve this.
NB. This can also be done using Python, NPM, WebPack, and React. Check out this link for a detailed approach.
Learning Strategy
Since I have prior experience with Python/Flask and React, I relied so much on learning how to change the building path of the react application that is created by running create-react-app
.
Conclusion
I hope you have learned something new from this article. Feel free to leave any comment or suggestion in the comment section below.
Image Citation: https://www.vphventures.com/building-mvp-with-flask-day-3-adding-bootstrap-4/
Time report
Estimated project set up time: 2 hours.
Thanks Suzan for this great article, it’s brilliant, I have some suggestion for the future direction of this implementation.
It’s good that you took us through the setup and the linking of a flask server to a React App, I suggest that you go ahead in part 2 of this topic and implement a more logical CRUD application e.g TodoList App. This will help all readers of your article to have a fully functional application with enough knowledge about how to serve a React App with a flask server thus enabling them to develop as many feature as they can in other different applications.
This was great. I followed the instructions and managed to get React served through Flask. I then deployed the Flask server to Heroku, which involved a little tweaking of the file locations. Thank you for your brilliant guide.
I have a question about the Flask Token. What exactly is this achieving? How would I use this is a future CRUD app. Pretty green coder here, so apologies if the questions are stupid!
Hi Lewis, I’m curious how you got your server deployed to Heroku. I followed the tutorial and am having trouble getting the file structure correct. Any tips you have would be really appreciated. Thanks
Thanks for the article! However, I think that this example is not production ready. Loosing live-reload and having running build command on every static change is very inconvenient.
its only good for one who has done it before, its not clear for example is it under scripts that we have to paste “homepage”: “/static/react”, variable
Great tutorial! I would add that I got a little confused at the “get rid of all static\” in the wepack.config file. I deleted the “static/” (mac) and it returned a error. When really all it does is create the subfolder in “flask-server/static”. Perhaps renaming would work better than getting rid of it!
That was the only part that tripped me up. I got through the tutorial in an hour and learned a ton! by far the most succinct tutorial I’ve found on the topic. Great work
How did you get rid of the error? I’m having the same issue.
you have to delete “static/” not “static\”
This is really a great tutorial. Although, I wanted to know if there is any alternate way to show live reloads rather than runnning ‘npm run build’ everytime we make changes.
Super rad! thanks for this
Nice tutorial. I guess my question is now that I see how to do it, is this the recommended way to do it? Is this how you’d recommend deploying a flask backend/react front end app?
How would this work with react-router?
are you kidding with me ???
i have to run nom build in every fucking change in react file ???
so is this the solution to the problem ??????!!!!
why is this stupidly hard ??!!
Thank you!