Prototyping APIs with Flask

Posted on July 17, 2018

Flask is a nice framework for Python that makes it easy to do various web-development projects in Python. Unlike Django, which is a just as good framework for web-development in Python, Flask is focused on having minimal boiler plate, and for the developer to only install what they need.

One part of flask which is useful to use for full stack web development purposes is for easy creation of GET HTTP APIs.

We will first go over the creation of a basic GET API created in Flask, and as a bonus see part of the client interface that receives the API.

To begin with the server, issue the following command in a folder created for a project.

python -m venv env

This will create a virtual environment to separate the various packages needed to work with Flask.

If you do not have virtualenv installed, do pip install virtualenv to be able to create a virtual environment. Before installing anything, go to env/Scripts/activate to activate the virtual enviroment.

Next to work with Flask, install the following

Remember to do the most recent versions, I did a tutorial recently that used an older version of Flask-Cors and it did not work as a result so check the packages your installing.

Next for the sake of time we will do it in one file but in production often the routes, JSON and other information is separated. In this case the routes and JSON are separated, so it is required to import the JSON being used.

Before that, here is a setup app.py file for a basic Flask GET API

This does the following. The first line imports Flask and a Flask package to read JSON data. The second line then imports flask_cors for cross origin resource sharing to access resources in different domains.

Then, the next relevant line imports the JSON data to be read. The next several lines are configuration for flask, with then CORS being set up for the flask app.

To create a route in flask and actually send the JSON, one needs to specify @app.route. This will create a route for the Flask Server. In this case, the server has a methods=['GET'] specify it is a get request. It also has a return jsonify, for sending the JSON data to the server to be called.

After all of this is set up run the following command

python app.py 
OR
flask run

Either command will start the Flask server at http://127.0.0.1:5000. Now navigate to http://127.0.0.1:5000/conflict and you can see the JSON data displayed on the webpage. With this JSON data for example the following results appear

This data can then be the used in Flask with Flask templates or be feed for UI purposes on a JavaScript frontend.

Bonus

As an example of displaying this data, here is a simple React component using the Flask data as a source of information, and then displaying it.

To summarize what this stateful react component does, with Reacts inbuilt request function, it calls the Flask API, stores the JSON into a array, and then creates a table with the data being various parts of the JSON data. One can do something similar in Vanilla JavaScript and in other JavaScript frameworks, or just create the client with Flask Templates.