Introduction:
Integrating a React Single Page Application (SPA) with a Python backend on Azure App Service offers a powerful combination for building dynamic web applications. By leveraging React for the frontend and Python for the backend, developers can create modern, responsive web applications with a seamless user experience.
Azure App Service provides a convenient platform for hosting both frontend and backend components of your application in a single environment, simplifying deployment and management tasks. With this setup, the React frontend can communicate with the Python backend through HTTP requests, enabling data exchange and interaction between the two layers.
Overall, integrating React SPA with a Python backend on Azure App Service offers a flexible and efficient solution for developing full-stack web applications, combining the strengths of both technologies to deliver compelling user experiences.
In this blog post, we'll guide you through the process of developing, building, and deploying a static web app built with React.js for the frontend and Python for the backend, all within a single app service.
Creating and Building a React.js Sample App Locally:
To build a SPA with React, you first need to set up your development environment by running the below commands. Ensure Node.js is installed in your machine. To install Node.js, you can refer https://nodejs.org/en/download
npx create-react-app my-project
This command creates a new React project with basic structure and some example code. Replace my-project with desired name for your project.
As soon as you run npx create-react-app my-project, you will be able to see the folder structure as below
To start the development server, navigate to the project directory and run the following command:
npm start
This command initiates the development server. Upon execution, the console or terminal interface will resemble the following:
Building React.js application locally:
In the previous step we just ran the application by using npm start. In order to build the application locally we need to execute the below command which generates the build folder in your project directory.
From the above screenshot we can also understand that to create a production build , use npm run build command which generates build folder.
npm run build
After executing this command, you should observe the folder structure as below.
Upon running this command, the console will display as shown below.
Running the React Single Page Application Locally from the Build Folder:
To run the React Single Page Application (SPA) locally from the build folder, you'll need to set up a local server to serve the static files.
Content of build folder resembles as below:
Using Serve: Serve is a simple command-line utility for serving static files locally. First, install it globally using the below command
npm install -g serve
Then navigate to your project's build directory and run the following command
serve
This serve command will start a local server, serving the build react application from 'build' directory. You'll see output similar to below
Creating a Python Flask App and integrate with React SPA:
We will be using the Flask library to create our API in Python. Flask is a lightweight web framework that makes it easy to create web applications in Python.
To create a basic Flask application you can refer to the document: Quickstart: Deploy a Python (Django or Flask) web app to Azure - Azure App Service | Microsoft Learn
We already have the build folder that got generated in our previous react application, now we need to copy the build folder and place it in the python project repository as shown in the below screenshot
To render the content from React to Python on default route('/') we need to add the code as below in the app.py
from flask import Flask, send_from_directory
app= Flask(__name__, static_folder='build', static_url_path='/')
@app.route('/')
def index():
return send_from_directory(app.static_folder, 'index.html')
if __name__ =='__main__':
app.run();
- app = Flask(__name__, static_folder='build', static_url_path='/') - Flask application instance is created with Flask(__name__).
The static_folder parameter specifies the directory from which static files (such as CSS, JavaScript, images) will be served. In this case, it's set to 'build', indicating that static files will be served from the build directory.
The static_url_path parameter specifies the URL prefix for the static files. Here, it's set to '/', meaning that static files will be served from the root URL. - send_from_directory() sends the 'index.html' file from the 'build' folder to the user's browser. This 'index.html' file usually serves as the starting point for a React single-page application.
Running the Flask Application Locally:
To run the Flask application locally, you need to execute the Python script containing your Flask application. For example if you have flask application code in a Python file named app.py then you need to run the below command in a terminal or command prompt.
python app.py
Deploying the Build Frontend (React SPA) and Python Flask to the Same Azure App Service:
Having combined the React Single Page application with Python by transferring the React build folder into Python, our next step involves deploying this Python application to Azure. This can be achieved by utilizing the "Deploy to Web App" feature in Visual Studio, as outlined below.
Running in the Azure Web App:
After deploying the application, you can access it by navigating to the Azure portal, then selecting "App Services," and clicking on the specific app service where the application has been deployed.
On the overview page, you'll find a browse option. Clicking on it will open the web page of the deployed application.
Happy Learning !!!!!!
