Getting Full Stack Ready with React and Flask
The creator of the first website, Sir Tim Berners-Lee, envisaged the web as an open platform that would allow internet users to share information, access opportunities, and collaborate without geographic and cultural restrictions. Interestingly, software developers are innovatively driving the realization of this mission.
As developers, we enable feature-rich web applications that make positive impacts on individuals and businesses around the world. Apart from sharing information, the web has drastically changed from mere static web pages to dynamic and database-driven web applications. Web technologists are coming up with new tools and techniques to make access to information on the internet hassle-free and natively convenient.
By the end of this chapter, you’ll have a better understanding of full stack web development in the context of client-server architectures. We’ll discuss major interactions that exist between the frontend of web applications and a database-driven backend.
Having these skill sets will usher you into the hall of fame of full stack web developers. This comes with complete knowledge of what it takes to start a web application development project from scratch and transform it into a full-blown web application. Whether you are a lone developer or a developer functioning in a collaborative team role, knowledge of full stack web development will boost your confidence to perform efficiently. In addition, you’ll have the flexibility to fit any assigned role in a team setting.
Further, we’ll dive into the reasons to use React, a UI library for building the user-facing end of web applications. You’ll briefly be introduced to the world of React and the reasons why React is essential to build complex modern web application interface components that allow users to have a smooth experience.
Developing web applications requires setting up the development environments. In full stack web application development, the frontend and backend have separate development environments. We’ll discuss how to set up React for the frontend and Flask as backend technology to power server-based processing and database interactions.
Additionally, we’ll dive into getting ready with Git, which is a source version control tool that helps developers to track changes to the code base. You are expected to acquire enough basic knowledge to kickstart deploying your code to GitHub, an online platform for version control.
In this age of technological innovation and the proliferation of creative software developments, source version control is an integral part of development. It fosters collaboration among software developers to solve problems in open source or commercial projects.
We’ll end the chapter by discussing the implementation of a real-world project we will build in this book, Bizza. The project takes you on a journey from a frontend web application perspective to a database-driven backend, connected to the REST API layer to facilitate communication.
So, without further ado, let’s start to experience the world of full stack web application development using two in-demand tech stacks, React and Flask. By the end of this book, you will be able to develop full stack applications.
In this chapter, we will cover the following main topics:
- An introduction to full stack web development
- Why should we choose React?
- Why should we choose Flask?
- Getting ready with Git
- What are we building?
The complete code for this chapter is available on GitHub at:
An introduction to full stack web development
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.
Let’s take a closer look at these tools and the reasons we have chosen them.
Why should we choose React?
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?
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.
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
To code and test React applications on your local machine, there are a few steps you need to take:
- Install Node.js:
- To download and install the stable version of Node.js, go to https://nodejs.org/en/.
- Click and download the version recommended for most users. Install by following the installation steps.
- To check whether Node.js was successfully installed, type the following into your command prompt:
$ node -v
- 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
Figure 1.1 – A screenshot showing that Node.js and NPM are working
- 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.
There are other code editors available to developers, but VS Code is highly recommended.
- 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:
- Choose your operating system (OS) type and install the software.
Figure 1.2 – A screenshot of the Git download page
- 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.
Why should we choose Flask?
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:
- 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
$ python -c "import sys; print(sys.version)"
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.
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:
- To upgrade
pip, type in this command on your terminal:
$ python -m pip install --upgrade pip
- 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
$ python -m venv venv
python3 -m venv venvto explicitly specify Python 3 to create the virtual environment.
For Windows users, try typing the following if you have issues:
$ py -m venv venv
- To upgrade
venv for Python version 3 and
virtualenv for Python version 2, depending on the Python version on your local machine.
- Activate the virtual environment in Windows:
If executing the command
$ venv\Scripts\activate doesn't function as expected, I recommend readers to attempt using
Activate the virtual environment on macOS or Linux:
$ source venv/bin/activate
- Install Flask:
$ pip install flask
Figure 1.5 – A screenshot showing the terminal commands for the flask installation
- To test the Flask development environment, create a file named
app.pyin your project directory. Open the
app.pyfile 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()
- Open the terminal and set your environment variables:
- Create either
.flaskenvto store your environment variables and secrets. Inside
.flaskenv, add the following:
- Then, enter the
pip install python-dotenvcommand in the terminal to install
python-dotenv, you can load the variables from the
.flaskenvfile into your application’s environment, making them accessible as if they were set directly as system environment variables.
- To run the Flask app, use the following command, and you will get output similar to Figure 1.6:
$ flask run
- Create either
Figure 1.6 – A screenshot showing how to run the Flask application
To deactivate the virtual environment, simply run
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.
Getting ready with Git
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:
- Let’s start by creating a working directory named
local_repositoryin the terminal:
$ mkdir local_repository
- Set the directory as a working directory:
$ cd local_repository
$ touch index.html
You will get the following output:
Figure 1.7 – A screenshot creating index.html
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.
- Set up your global credentials:
$ git config --global user.name "Name of User"$ git config --global user.email "email@example.com"
- 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
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.
- 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.
- 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
To add multiple contents, enter
- 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
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:
- Create a developer account on the GitHub site: https://github.com/.
Figure 1.11 – A screenshot showing the GitHub signup page
Figure 1.12 – A screenshot showing the staging state of Git
- 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.
What will we build?
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.