Python and Flask Server Installations
If you’re on Windows and don’t have Python installed already, download it from the python.org website. Mac users need not download Python as the OS comes with it by default. You’ll be able to follow along reasonably well using Linux as well.
Server Setup and Installation
You’ll need a server to create a Python REST API. There are many Python web frameworks for this. Flask, Django, FastAPI, Tornado, and many others come in handy for writing REST APIs in Python.
Nonetheless, you’ll use Flask for this tutorial, as it’s easy to understand and API-friendly.
First, create a Python virtual environment. Open your terminal to your project root folder. Then, install Flask and flask-cors using pip:
The flask-cors package is Flask’s built-in CORS module for bypassing the cross-origin resource policy while requesting from the API endpoint. You’ll see how to set this up with Flask as you move on.
That’s all for the installation part.
Flask Skeletal Structure
Next, create a new file in your project root folder. Ensure that it has the .py file extension. For example, it can be app.py.
Open that file into your favorite code editor and set up your Flask app as follows:
The above code imports the required modules and configures your app. The extra code at the tail end (app.run()) sets the app to run on a default port, usually port 5000.
Create a POST API Endpoint
But first, open the app.py file, set up a POST API endpoint, and call it receiver. Have it in mind that you can use any naming convention you like.
Here’s how your Python file looks now:
But first, here’s how index.html looks:
Notably, the HTML file above describes a button that listens to a click event to display the posted data, either in the console or the DOM.
The h3 tag serves as a container for the incoming data if you later decide to display it in the DOM. Note that this is not a convention—you can display the incoming data in any HTML container you like.
The above script contains a JSON array of rally cars. The button.click function is a click event listener attached to the button in the HTML file you created earlier.
Now, launch the HTML file in your browser and open the developer console (on Windows: Ctrl + Shift + I, on Mac: CMD + ALT + I). Go to the Console section, and you’ll see the returned JSON response.
To track the JSON response in real-time, click Network in the developer console (on Chrome). Below the network timeline, select receiver or the name of your Flask endpoint. Then click Response at the top of that submenu.
The response should look something like this:
Also, you can click Headers to view the response status of the request. This should be 200, which means your API has returned a valid response.
Hence, when you click the post button, here’s what you get:
Keep Exploring REST APIs in Web Development
You can dig deeper by connecting the Flask REST API to a database like MongoDB—so this lets you have a repository to store the posted data. You might even turn this into a full-blown project by sending the data to the database using a form field.