This tutorial will help you on how to create a single-page web app with Flask. It is one of the most popular web Python frameworks. It is considered a micro-framework, based on doing a single task at a time and doing it well. The power of Flask lies in its extensibility and it has a very powerful extension model. Flask supports many features such as an inbuilt development server, unit testing, and an extension mechanism so that we can add extra functionality.

It can be used to build anything from a small static page to a large and complex application. In this blog, we’ll take a tour of this framework, from installation to rendering your first page. We’ll see what’s here for your use under the hood, including a brief look at a few other packages that help make a Flask application shine.

In this blog, we’ll take a tour of this framework, from installation to deployment. We’ll see what’s here for your use under the hood, including a brief look at a few other packages that help make a Flask application shine.

Why Should You Use Flask?

As I alluded to earlier, Flask does one thing well – building web apps. Not only does it do it very well, but it is built to provide the best developer experience. It’s built on Python3, which helps make development a smooth experience, and it was designed from the ground up to support many extensions and makes it easy to integrate third-party applications. It is relatively small, and code reuse is a big plus. How does a Flask application work? Let’s make a basic Flask application to understand this better.

Installation 

Installing Virtual environment

Note: Python and Pip should be installed on your machine to follow up with the steps coming ahead.

You should always use a virtual environment to manage the dependencies for your project, both in development and in production. If you are using Python 3, it already comes bundled with the venv module to create virtual environments. To create a virtualenv, run the following command: 

mkdir myproject
cd myproject
python3 -m venv venv

Now, a virtual environment is installed on your machine But before you start working on your project, activate the environment you just created. In our case it can be started with: 

. venv/bin/activate

This prefix i.e. “(env)” written on the left side, indicates that your virtual environment is currently active. It might also have another name depending upon how it was named during creation.

Installing Flask

Flask is available in Python 2 and 3 and is easy to install. Many prefer the pip approach for installing dependencies, because of its ease of use. But you can also do a sudo apt-get install flask rather than doing: sudo pip install flask to install Flask.

Flask can be installed using the following command: 

pip3 install flask

Flask should now be successfully installed on your machine.

Note: There are some dependencies that are installed automatically when installing Flask. These include Werkzeug: which implements WSGI, Jinja: which renders pages, and a couple more. These dependencies are necessary to make Flask’s all the basic functions work properly.

Additionally, once the installation is complete, you can run the following command to confirm the installation was done properly and which version are you running: 

python -c "import flask; print(flask.__version__)"

Creating Your First Flask Program: Hello World!

Now that you have installed Flask, it’s time to create your first project!

Create a project directory by: 

mkdir flask-tutorial  #You can name the folder anything you want
cd flask-tutorial

A Flask application can be as simple as a single file, here to demonstrate we’ll create a file named hello.py inside the flask-tutorial folder. 

from flask import Flask  #importing flask elements to make everything work
app = Flask(__name__)

@app.route("/")
def hello():
  return 'Hello World!'
if __name__ == '__main__':
  app.run(debug=True)

Here, we are importing the render_template Flask function and rendering our HTML template in the home (/) path.

To run this simple application, use the command below in the specific folder you made it. 

python3 Hello.py

If the command above worked, then you would see a response something like this: 

* Serving Flask app 'hello' (lazy loading)
* Environment: production
* Debug mode: on
* Running on http://127.0.0.1:5000/
* Restarting with stat
* Debugger is active!
* Debugger PIN: 710-125-169

Now, go to http://127.0.0.1:5000/ to see the results. You can close the server by pressing CTRL+C

Rendering HTML pages with Flask

Your current application does not make use of any HTML files. Websites and web-based applications mainly use HTML to display information for the visitor. That’s we’ll be now going to see how to incorporate HTML files in your project, which can be displayed on a web browser.

First, in your flask-tutorial directory, create folders called static and templates. Inside the templates folder, create your index.html. To showcase here, I’ll just put an h1 element: 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <h1>You just rendered your first html page in Flask!</h1>  </body></html>

Now, open your hello.py file and make the following changes: 

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def hello():
  return render_template ("index.html")
if __name__ == '__main__':
  app.run(debug=True)

Then save the file, go to http://127.0.0.1:5000/ and refresh. You should be now able to see the contents of your Html file there.

Awesome! You just rendered your first Html page in Flask!

Now you build your site from here on out, just make sure that all of your static files (such as your CSS, and JavaScript libraries/file) are properly set up, you need to put those files in a ‘static’ folder setup which we created earlier unless you specifically override it during Flask initialization.

Flask Packages

In addition to Flask itself, there are a number of other packages that can be used in an application. The one you want to look for is the Flask-WebClient. The WebClient package provides a convenient interface for interacting with the Web server, writing URLs and JSON. When you interact with the Web server, a Web client object is created. In Flask, this is done by instantiating a WebClient instance from an instance of flask_init(). In Flask, there is no need for direct access to the Web server. The WebClient provides this functionality instead. 

Final Words

It was easy right? This is how to create a single-page web app with Flask. A complete Flask application will typically need quite a bit of the following: MySQL for hosting the database Apache or Nginx for serving the application, or both, depending on your use case Version control for managing your code and to avoid version conflicts A CDN to serve static files Shards and listeners to listen to HTTP requests Forms to allow web forms to be used to interact with the site. A template engine to make your site look more attractive. A utility to view and modify the content of the database, admin panel …and so much more… This is just a sample list of what can be installed with very little effort. 

Here are some useful tutorials that you can read: