Book Image

Full-Stack Flask and React

By : Adedeji
3.5 (2)
Book Image

Full-Stack Flask and React

3.5 (2)
By: Adedeji

Overview of this book

Developing an interactive, efficient, and fast enterprise web application requires both the right approach and tooling. If you are a web developer looking for a way to tap the power of React’s reusable UI components and the simplicity of Flask for backend development to develop production-ready, scalable web apps in Python, then this book is for you. Starting with an introduction to React, a JavaScript library for building highly interactive and reusable user interfaces, you’ll progress to data modeling for the web using SQLAlchemy and PostgreSQL, and then get to grips with Restful API development. This book will aid you in identifying your app users and managing access to your web application. You’ll also explore modular architectural design for Flask-based web applications and master error-handling techniques. Before you deploy your web app on AWS, this book will show you how to integrate unit testing best practices to ensure code reliability and functionality, making your apps not only efficient and fast but also robust and dependable. By the end of this book, you’ll have acquired deep knowledge of the Flask and React technology stacks, which will help you undertake web application development with confidence.
Table of Contents (21 chapters)
1
Part 1 – Frontend Development with React
9
Part 2 – Backend Development with Flask

Why should we choose Flask?

Flask is a minimalistic framework to develop modern Python web applications. It is a great toolkit for building enterprise-grade, scalable, reliable, and maintainable applications.

Moreover, the framework is easy to learn. Flask has no boilerplate code that must be used by developers, unlike many alternative frameworks such as Django. It is absolutely lightweight to the core. Flask as a microframework only provides developers with starting components to build web applications, while Django tends to suggest you build your web apps in a certain structure using a complete set of gears or components within its framework.

With Flask, developers have amazing freedom to choose their database, template engine, and deployment process; they can also decide how to manage users, sessions, web applications, and security.

Flask’s scalability has encouraged some technology companies to migrate to Flask to efficiently implement their microservices infrastructure. A microservice is a small, independent, and loosely coupled software component that focuses on performing a specific function within a larger application architecture.

A microservice is like having a team of specialists, each focusing on a particular task, working together harmoniously to create something amazing. As I’m sure you would agree, cloud computing has revolutionized application development and deployment irrevocably. The science of scale that is at play with cloud computing is making it the new normal for both start-ups and enterprises. Pinterest is one such example.

Pinterest is one of the most visited websites in the world. It is an image-sharing and social media services platform. According to Statista, as of the fourth quarter of 2021, Pinterest had an average of 431 million monthly active users (https://www.statista.com/statistics/463353/pinterest-global-mau/). Having started their platform with the Django framework, they opted for Flask to develop their API and build a more stable microservice architecture.

Flask is still currently the main core backend technology powering Pinterest, a heavily trafficked social web application. In summary, it is easier to develop APIs and integrate varied databases in Flask. You can take it to the bank with such simplicity and flexibility assurance. If you understand Python well, then you should be able to contribute to a Flask application easily.

Flask is less opinionated, so there are fewer standards to learn. Django, conversely, gives you all you need to develop web applications – complete solutions in a box. However, the issue of scaling is what most experienced Python developers have had to deal with in their Django projects.

When you implement an out-of-the-box solution in your project, you have got a giant Django framework to deal with, which may impact negatively your project’s time to market and performance.

When you combine these battle-tested technology stacks, React and Flask, in your project, you can be sure of development gains in scalability, reliability, reusability, maintainability, and secure web and mobile applications.

In this section, we discussed why you should add React and Flask to your web application’s development toolkit.

Setting up the development environment with Flask

If you want to start developing web applications on your local computer with Flask as your backend framework, you need to have Python and a few other packages installed. In this section, we will set up a Flask development environment. To do so, follow these steps:

  1. Install Python.

    To begin, check to see whether you have Python installed already on your computer. To test for Python installation, open Command Prompt if you use Windows or Terminal for macOS or Linux, and then type in the following command:

    $    python –version

    You will get the following output:

Figure 1.4 – A screenshot showing the Python version

Figure 1.4 – A screenshot showing the Python version

Alternatively, you can use the following command:

$    python -c "import sys; print(sys.version)"

Note

In macOS or Linux, the Python3 —version command also works to check the Python version number and, by extension, the Python installation.

If Python has not been installed on your computer system, go to https://www.python.org/downloads/, choose the latest version suitable for your OS, and download and install it on your system.

  1. Update pip.

    pip is a package manager for Python. It is a widely used tool for installing and updating packages for Python application development. If you followed step 1, you should already have pip installed along with Python:

    1. To upgrade pip, type in this command on your terminal:
      $      python -m pip install --upgrade pip
    1. Create a virtual environment.

    A virtual environment is a tool that allows you to have separate dependencies or package installations of your Python projects. With a virtual environment, you can conveniently have one or more Python projects on your computer system without conflicting with OS system libraries or packages from other Python installations. Every project package is self-contained or isolated in the virtual environment.

    To create a virtual environment, type the following in the terminal or cmd for Windows:

    $    python -m venv venv

    Alternatively, use python3 -m venv venv to explicitly specify Python 3 to create the virtual environment.

    For Windows users, try typing the following if you have issues:

    $      py -m venv venv

Note

You use venv for Python version 3 and virtualenv for Python version 2, depending on the Python version on your local machine.

  1. Activate the virtual environment in Windows:
    $    venv\Scripts\activate

Note:

If executing the command $ venv\Scripts\activate doesn't function as expected, I recommend readers to attempt using $ venv\Scripts\activate.bat instead.

Activate the virtual environment on macOS or Linux:

$    source venv/bin/activate
  1. Install Flask:
    $    pip install flask

    The following screenshot shows the Flask installation command operation.

Figure 1.5 – A screenshot showing the terminal commands for the flask installation

Figure 1.5 – A screenshot showing the terminal commands for the flask installation

  1. To test the Flask development environment, create a file named app.py in your project directory. Open the app.py file in the VS code editor and paste in the following:
    from flask import Flaskapp = Flask(__name__)@app.route('/')def index():    return 'Welcome to Bizza Platform!'if __name__ == '__main__':    app.run()
  2. Open the terminal and set your environment variables:

    For Windows, macOS, or Linux:

    1. Create either .env or .flaskenv to store your environment variables and secrets. Inside .flaskenv, add the following:
      FLASK_APP=app.pyFLASK_ENV=developmentFLASK_DEBUG=true
    1. Then, enter the pip install python-dotenv command in the terminal to install Python-dotenv. With python-dotenv, you can load the variables from the .env or .flaskenv file into your application’s environment, making them accessible as if they were set directly as system environment variables.
    2. To run the Flask app, use the following command, and you will get output similar to Figure 1.6:
      $    flask run
Figure 1.6 – A screenshot showing how to run the Flask application

Figure 1.6 – A screenshot showing how to run the Flask application

Note

To deactivate the virtual environment, simply run $ deactivate.

Having set up and tested the development environment for Flask, we’ll briefly discuss Git to understand the place of source version control in web application development and how GitHub has provided an online collaborative platform to tackle source code and encourage teamwork.