The complete code for this chapter is available on GitHub at:

https://github.com/PacktPublishing/Full-Stack-Flask-and-React/tree/main/Chapter01

Modern web applications are complex and rapidly evolving. The business community’s needs and system requirements are motivating software developers to stretch beyond being able to function only as either a frontend or backend developer. The ability of web developers to develop full stack applications is now essential more than ever and on the rise.

In this book, we will focus on full stack web development, which refers to both the frontend and backend parts of web development. The frontend, sometimes referred to as the client side, is the visible part of any web application that users can see and interact with. The backend, sometimes referred to as the server side, is that portion where programmer code resides, coupled with a database and other server infrastructure.

Web developers who are skilled in both the client side (frontend development) and server side (backend development) are usually referred to as full stack developers.

In this book, we will use React as a library to develop an intuitive user interface (UI), or frontend, and Flask, a microframework, to build backend business logic components.

Let’s take a closer look at these tools and the reasons we have chosen them.

Building UIs for web applications is an essential part of web development. Interestingly, most web developers find it difficult to choose the most suitable JavaScript frontend library or framework to build UIs. In a moment, we will see why choosing React will help your career growth and projects.

React is a popular open source library, with an excellent community of developers at Meta Platforms (formerly Facebook) actively maintaining it. React is the most commonly used library according to the Stack Overflow 2021 Developer Survey report, in which 41.4% of professional developers stated they had used React in the past year (https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-web-framewors). So, what is the fuss about React?

React is simple to use to develop rich interactive interfaces for end users. You can start building reusable interface components for your web projects in no time. It is also easy to learn, as you will see in the implementation of the frontend project we’ll embark upon in this book. If you are already familiar with JavaScript, learning React is really simple, as React is JavaScript-centric.

One of the main reasons React might be with us as long as the internet lives is due to its usage among technology giants such as Facebook, Uber Eats, Skype, and Netflix. Additionally, React, being a library, focuses specifically on building UI components – and nothing more. Its component-based approach to developing web and mobile applications makes it insanely popular among developers.

The further abstraction of the Document Object Model (DOM) in React to what is called the virtual DOM improves efficiency and performance in React applications. React uses special syntax, referred to as JavaScript XML (JSX), that allows you to write HTML elements in JavaScript, in contrast to the convention of putting JavaScript in HTML elements.

You don’t have to learn complex templating languages such as Handlebars, EJS, and Pug. JSX helps you write React components using familiar HTML syntax with the help of a transpiler called Babel. Some JavaScript frameworks are very opinionated – for instance, Angular, Ember.js, and Vue. These frameworks have a rigid structural way of building web applications, unlike React, which gives you the freedom and flexibility to select your libraries, architectures, and tools.

Also, if you are interested in developing mobile applications, React Native can be a valuable tool. Your knowledge of React and its components, which seamlessly integrate with native views, empowers you to create both Android and iOS apps efficiently.

Now, let’s get our hands dirty and set up environments with React.

Setting up the development environment with React

In this section, you will set up a development environment for the React application project we’ll build in the course of this book.

To code and test React applications on your local machine, there are a few steps you need to take:

1. Install Node.js:
   1. To download and install the stable version of Node.js, go to https://nodejs.org/en/.

   Node.js is a runtime development environment for JavaScript and, by extension, React applications. Node.js comes bundled with a command-line utility tool and package manager called Node Package Manager (NPM). Node.js and NPM are the tools required to successfully build and run any React applications.

   2. Click and download the version recommended for most users. Install by following the installation steps.
   3. To check whether Node.js was successfully installed, type the following into your command prompt:

      $    node -v

   4. To check the version of NPM, type the following in the terminal or command prompt (cmd) for Windows:

      $    npm -v

   The following screenshot shows that node and npm are working.

Figure 1.1 – A screenshot showing that Node.js and NPM are working

2. Install Visual Studio Code (VS Code).

   VS Code is a free code editor you can use to build and debug web applications. The ready-set-code approach of the VS Code editor makes it a great tool for development. VS Code has built-in support for IntelliSense code completion and features for code refactoring. Third-party extensions in VS Code with hundreds of web technologies tools allow you to be more productive and efficient.

Note

There are other code editors available to developers, but VS Code is highly recommended.

3. Install Git Client.

   Git Client is the command-line interface used to interact with Git repositories. There’ll be more on Git later in the chapter. We need this tool to track changes in our project files. To install Git Client, download it from https://git-scm.com/downloads:

   1. Choose your operating system (OS) type and install the software.

Figure 1.2 – A screenshot of the Git download page

2. To test whether you successfully installed Git, type the following in your system’s command prompt:

$    git --version

Figure 1.3 – A screenshot showing the Git Client version in Windows

We have now set up the development environment for the React applications we’ll be building. This completes the frontend development environment. Let’s do the same for Flask as well, and delve into why you need to choose Flask to build your backend.

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

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.

2. 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

   2. 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.

3. 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

4. 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

5. 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()

6. 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

   2. 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.
   3. 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

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.

Git is a tool for version control in software development. So, what does version control mean?

As a professional developer, you will need to write code as often as possible. Let’s say you work on a project and it’s 80% complete. The project lead has asked you to add a new feature to your code base, and it is urgent as the client wants your team to add that as part of the features required in the minimum viable product you will be presenting in a few days’ time.

You quickly abandon what you were working on before and start working on this new feature. You make changes to one or two files to incorporate the new features. In the shortest time possible, you made the new feature work. Unfortunately, while trying to add the new feature, you unintentionally tampered with code in other files as well, and you don’t even know which one of them is affected.

Now imagine you have a genie that can tell you where in your code you made your change and the exact altered line of code. Wouldn’t that be awesome? Life would be super easy, saving you lots of development time. That’s the magic of version control!

Version control helps you keep track of changes to the code base in your software project. It is a great way of helping developers monitor changes in their source code. Moreover, it eases the collaborative work of the development team. With version control, you can track code base changes, who is changing the code base, and when the change happens. And, if changes are not desirable, you can quickly reverse them.

Developers have used many different version control tools over the years. Git happens to be the current market leader.

How does Git work?

Git is known as distributed version control software. In a work environment where collaboration among team members is necessary, a complete copy of the entire source code will be available on every contributor’s local computer system; we can call this a local repository.

Git tracks the local repository, maintaining a record of all the changes that occur within the local repository. It saves you the time and energy of keeping multiple versions of the project in separate local directories on your computer. This makes sharing changes to the source code between collaborators effortless.

There are three primary states in Git you should know about:

• Modified: In this state, files have been changed, but the changes have not yet been added to the local database by Git. These changes are the ones made since the last commit on the files.
• Staged: In this state, the changes have been tracked by Git and will be added to the Git local database as such in the next commit.
• Committed: In this state, the changed files have successfully been added to the git local database.

Let’s dive deeper into version control concepts and learn how to create local and remote repositories. Before that, it will be helpful to understand the difference between Git and GitHub.

Git versus GitHub

As discussed earlier, Git is an open source tool for version control. It is simply used to track changes in a code base, track the identity of the person who made the change, and allow team coding collaboration among developers. When you set up your project on your local machine, Git is used to track changes in all the activities – adding files, updating existing files, or creating new folders.

It basically keeps a historical record of your source code. Conversely, GitHub is a cloud-based source code hosting and project management service. It simply allows you to use Git as a tool to keep your code base in a remotely hosted environment to track changes in your code base or collaboratively allow developers to work on projects.

Setting up a local repository

Install Git Client from https://git-scm.com/download/. Ignore this step if you already have it installed on your machine:

1. Let’s start by creating a working directory named local_repository in the terminal:

   $      mkdir local_repository

2. Set the directory as a working directory:

   $      cd local_repository

   Inside the working directory, create an HTML file named index.html:

   $      touch index.html

   You will get the following output:

Figure 1.7 – A screenshot creating index.html

Note

If you are getting an error, 'touch' is not recognized as an internal or external command, operable program or batch file, with touch index.html, type npm install -g touch-cli in your terminal if you have Node.js installed.

3. Set up your global credentials:

   $    git config --global user.name "Name of User"$    git config --global user.email "[email protected]"

   With the preceding commands, you set a global username and email address as credentials to track your contributions in the project source code.

4. Your working directory now has a new file, index.html. Enter this command in the terminal, and you will get output similar to Figure 1.8:

   $    git init

Figure 1.8 – A screenshot showing the creation of the empty Git repository

With git init, you create an empty local git repository. Git now has a local database or directory that contains all the metadata to track changes in your working directory. The .git folder is usually hidden in your working directory.

5. To add the content of your working directory to your repository, enter the following command:

   $    git add index.html

   This represents the staging state in Git. The changes are tracked by Git and will be added to the Git local database in the next commit.

6. To verify this, enter the following command, and you will get output similar to Figure 1.9:

   $    git status

Figure 1.9 – A screenshot showing the staging state of Git

Note

To add multiple contents, enter git add.

7. Now, you will need to commit to a local repository. This commit stage helps you track changes in your code base with a user-friendly message. To commit with a message flag, enter the following command, and you will get output similar to Figure 1.10:

   $    git commit -m "first commit"

Figure 1.10 – A screenshot showing the commit state of Git

Note

It is always best practice to include a message in your commit command. This helps track changes, and if you have to revert, you can use a commit message as your saving point.

Now you understand how to create a local repository, add files to it, and transition files from the staging area to the committed state. Let’s briefly discuss how you can create a remote repository on GitHub for the cloud-based storage of your source code for possible collaboration.

Setting up a remote repository with GitHub

In today’s digital age, GitHub has become an essential skill for seamless collaboration and version control in software development projects. Let’s delve into setting up a remote repository with GitHub:

1. Create a developer account on the GitHub site: https://github.com/.

Figure 1.11 – A screenshot showing the GitHub signup page

2. Log in and click on New, and you will get the following screen:

Figure 1.12 – A screenshot showing the staging state of Git

3. Once you have created your new repository, enter the following command in your current working directory:

   $    git remote add origin https://github.com/your-git-username/your-repository-name.git$    git branch -M main$    git push-u origin main

   The preceding commands move your local repository to a remote cloud-based repository to track your code base changes.

In summary, we discussed Git as a required tool for web developers in the modern age. You now know the difference between Git and GitHub. We also discussed basic, useful commands for a version control operation, either in a local or remote repository. Next, we’ll dive into the real-world project we will build in this book using React and Flask.

In this book, we will build a full stack, database-driven web application for conference speakers. It is called Bizza. Users will be able to see the directory of speakers for events of interest to them, events, schedules, and the titles of the papers those speakers are presenting. The solution will include frontend development with React, authentication, authorizations, and REST API design with Flask.

We will start by implementing the frontend in the initial few chapters of the book and subsequently implement the backend in later chapters.

In this chapter, we provided a brief introduction to modern full stack web development, with an emphasis on the distinction between frontend and backend developers. We discussed the importance of React in building the user interfaces of web applications, and we explained how React and Flask are perfect tools to develop full stack web applications, owing to their simplicity, efficiency, and high performance when compared to rivals in the industry. The development environments for React and Flask were covered as well.

Lastly, we discussed the importance of Git as a tool for version control and the project we will build in this book, Bizza.

In the next chapter, we’ll dive deeper into explaining components, props, and states in React to better understand how React applications are built. A typical React project structure will be discussed, with the aim of learning the functions of files and directories.