Chapter 4 - Preparing the app for deployment

In this chapter we will inspect how we can prepare our app for deployment in a production environment.

Compiling the React App

First we need to compile the React app. Compiling means that the app will be packed into a single javascript file.

Execute the following command in your React project:

npm run build

This command will create a new directory named build in your project folder. Let's inspect the files. There is a file named index.html in this directory. This is the main file of our compiled React app. Also there is a subdirectory named static which contains the directories js and css. This is where our compiled CSS and JavaScript code lies. The CSS and JS code is loaded by the index.html file.

Adding a route for static content to the Python API

Copy all the files from build in the React directory in a directory named static in the Flask app directory.

First we need to tell the Flask app where it can find our compiled React app. Modify the line where you create the Flask app in the following way:

app = Flask(__name__, static_folder='static', static_url_path='')

Now start the Flask app and visit http://localhost:5000. You will see the React app, although you started the Flask app. This is because the Flask appis now serving the compiled React app via the main route.

You can now run the app on any device that is able to run a Python application.