*The author selected the [Free and Open Source Fund](https://www.brightfunds.org/funds/foss-nonprofits) to receive a donation as part of the [Write for DOnations](https://do.co/w4do-cta) program.* ### Introduction [Flask](http://flask.pocoo.org/) is a small and lightweight Python web framework that provides useful tools and features that make creating web applications in Python easier. It gives developers flexibility and is a more accessible framework for new developers since you can build a web application quickly using only a single Python file. Flask is also extensible and doesn't force a particular directory structure or require complicated boilerplate code before getting started. As part of this tutorial, you'll use the [Bootstrap toolkit](https://getbootstrap.com/) to style your application so it is more visually appealing. Bootstrap will help you incorporate responsive web pages in your web application so that it also works well on mobile browsers without writing your own HTML, CSS, and JavaScript code to achieve these goals. The toolkit will allow you to focus on learning how Flask works. Flask uses the [Jinja template engine](http://jinja.palletsprojects.com/) to dynamically build HTML pages using familiar Python concepts such as variables, loops, lists, and so on. You'll use these templates as part of this project. In this tutorial, you'll build a small web blog using Flask and [SQLite](https://sqlite.org) in Python 3. Users of the application can view all the posts in your database and click on the title of a post to view its contents with the ability to add a new post to the database and edit or delete an existing post. ## Prerequisites Before you start following this guide, you will need: * A local Python 3 programming environment, follow the tutorial for your distribution in [How To Install and Set Up a Local Programming Environment for Python 3](https://www.digitalocean.com/community/tutorial_series/how-to-install-and-set-up-a-local-programming-environment-for-python-3) series for your local machine. In this tutorial we'll call our project directory `flask_blog`. * An understanding of Python 3 concepts, such as [data types](https://www.digitalocean.com/community/tutorials/understanding-data-types-in-python-3), [conditional statements](https://www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-python-3-2), [for loops](https://www.digitalocean.com/community/tutorials/how-to-construct-for-loops-in-python-3), [functions](https://www.digitalocean.com/community/tutorials/how-to-define-functions-in-python-3), and other such concepts. If you are not familiar with Python, check out our [How To Code in Python 3](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-python-3) series. ## Step 1 — Installing Flask In this step, you'll activate your Python environment and install Flask using the [`pip`](https://pypi.org/project/pip/) package installer. If you haven't already activated your programming environment, make sure you're in your project directory (`<^>flask_blog<^>`) and use the following command to activate the environment: ```command source <^>env<^>/bin/activate ``` Once your programming environment is activated, your prompt will now have an `<^>env<^>` prefix that may look as follows: ```custom_prefix((env)sammy@localhost:$) ``` This prefix is an indication that the environment `env` is currently active, which might have another name depending on how you named it during creation. <$>[note] **Note:** You can use [Git](https://git-scm.com/), a version control system, to effectively manage and track the development process for your project. To learn how to use Git, you might want to check out our [Introduction to Git Installation Usage and Branches](https://www.digitalocean.com/community/tutorial_series/introduction-to-git-installation-usage-and-branches) article. If you are using Git, it is a good idea to ignore the newly created `env` directory in your `.gitignore` file to avoid tracking files not related to the project. <$> Now you'll install Python packages and isolate your project code away from the main Python system installation. You'll do this using `pip` and `python`. To install Flask, run the following command: ```custom_prefix((env)sammy@localhost:$) pip install flask ``` Once the installation is complete, run the following command to confirm the installation: ```custom_prefix((env)sammy@localhost:$) python -c "import flask; print(flask.__version__)" ``` You use the [`python` command line interface](https://docs.python.org/3/using/cmdline.html) with the option `-c` to execute Python code. Next you import the `flask` package with `import flask;` then print the Flask version, which is provided via the `flask.__version__` variable. The output will be a version number similar to the following: ``` [secondary_label Output] <^>1.1.2<^> ``` You've created the project folder, a virtual environment, and installed Flask. You're now ready to move on to setting up your base application. ## Step 2 — Creating a Base Application Now that you have your programming environment set up, you'll start using Flask. In this step, you'll make a small web application inside a Python file and run it to start the server, which will display some information on the browser. In your `flask_blog` directory, open a file named `hello.py` for editing, use `nano` or your favorite text editor: ```custom_prefix((env)sammy@localhost:$) nano hello.py ``` This `hello.py` file will serve as a minimal example of how to handle HTTP requests. Inside it, you'll import the [`Flask` object](https://flask.palletsprojects.com/en/1.1.x/api/#flask.Flask), and create a function that returns an HTTP response. Write the following code inside `hello.py`: ```python [label flask_blog/hello.py] from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello, World!' ``` In the preceding code block, you first import the `Flask` object from the `flask` package. You then use it to create your Flask application instance with the name `app`. You pass the special variable `__name__` that holds the name of the current Python module. It's used to tell the instance where it's located—you need this because Flask sets up some paths behind the scenes. Once you create the `app` instance, you use it to handle incoming web requests and send responses to the user. `@app.route` is a [decorator](https://en.wikipedia.org/wiki/Python_syntax_and_semantics#Decorators) that turns a regular Python function into a Flask _view function_, which converts the function's return value into an HTTP response to be displayed by an HTTP client, such as a web browser. You pass the value `'/'` to `@app.route()` to signify that this function will respond to web requests for the URL `/`, which is the main URL. The `hello()` view function returns the string `'Hello, World!'` as a response. Save and close the file. To run your web application, you'll first tell Flask where to find the application (the `hello.py` file in your case) with the `FLASK_APP` environment variable: ```custom_prefix((env)sammy@localhost:$) export FLASK_APP=hello ``` Then run it in development mode with the `FLASK_ENV` environment variable: ```custom_prefix((env)sammy@localhost:$) export FLASK_ENV=development ``` Lastly, run the application using the `flask run` command: ```custom_prefix((env)sammy@localhost:$) flask run ``` Once the application is running the output will be something like this: ``` [secondary_label Output] * Serving Flask app "hello" (lazy loading) * Environment: development * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 813-894-335 ``` The preceding output has several pieces of information, such as: * The name of the application you're running. * The environment in which the application is being run. * `Debug mode: on` signifies that the Flask debugger is running. This is useful when developing because it gives us detailed error messages when things go wrong, which makes troubleshooting easier. * The application is running locally on the URL `http://127.0.0.1:5000/`, `127.0.0.1` is the IP that represents your machine's `localhost` and `:5000` is the port number. Open a browser and type in the URL `http://127.0.0.1:5000/`, you will receive the string `Hello, World!` as a response, this confirms that your application is successfully running. <$>[warning] **Warning** Flask uses a simple web server to serve our application in a development environment, which also means that the Flask debugger is running to make catching errors easier. This development server should not be used in a production deployment. See the [Deployment Options](https://flask.palletsprojects.com/en/1.1.x/deploying/) page on the Flask documentation for more information, you can also check out this [Flask deployment tutorial](https://www.digitalocean.com/community/tutorials/how-to-serve-flask-applications-with-gunicorn-and-nginx-on-ubuntu-18-04). <$> You can now leave the development server running in the terminal and open another terminal window. Move into the project folder where `hello.py` is located, activate the virtual environment, set the environment variables `FLASK_ENV` and `FLASK_APP`, and continue to the next steps. (These commands are listed earlier in this step.) <$>[note] **Note**: When opening a new terminal, it is important to remember activating the virtual environment and setting the environment variables `FLASK_ENV` and `FLASK_APP`. While a Flask application's development server is already running, it is not possible to run another Flask application with the same `flask run` command. This is because `flask run` uses the port number `5000` by default, and once it is taken, it becomes unavailable to run another application on so you would receive an error similar to the following: ``` [secondary_label Output] OSError: [Errno 98] Address already in use ``` To solve this problem, either stop the server that's currently running via `CTRL+C`, then run `flask run` again, or if you want to run both at the same time, you can pass a different port number to the `-p` argument, for example, to run another application on port `5001` use the following command: ```custom_prefix((env)sammy@localhost:$) flask run -p 5001 ``` <$> You now have a small Flask web application. You've run your application and displayed information on the web browser. Next, you'll use HTML files in your application. ## Step 3 — Using HTML templates Currently your application only displays a simple message without any HTML. Web applications mainly use HTML to display information for the visitor, so you'll now work on incorporating HTML files in your app, which can be displayed on the web browser. Flask provides a `render_template()` helper function that allows use of the [Jinja template engine](http://jinja.pocoo.org/). This will make managing HTML much easier by writing your HTML code in `.html` files as well as using logic in your HTML code. You'll use these HTML files, (_templates_) to build all of your application pages, such as the main page where you'll display the current blog posts, the page of the blog post, the page where the user can add a new post, and so on. In this step, you'll create your main Flask application in a new file. First, in your `flask_blog` directory, use `nano` or your favorite editor to create and edit your `app.py` file. This will hold all the code you'll use to create the blogging application: ```custom_prefix((env)sammy@localhost:$) nano app.py ``` In this new file, you'll import the `Flask` object to create a Flask application instance as you previously did. You'll also import the [`render_template()`](https://flask.palletsprojects.com/en/1.1.x/api/#flask.render_template) helper function that lets you render HTML template files that exist in the `templates` folder you're about to create. The file will have a single view function that will be responsible for handling requests to the main `/` route. Add the following content: ```python [label flask_blog/app.py] from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') ``` The `index()` view function returns the result of calling `render_template()` with `index.html` as an argument, this tells `render_template()` to look for a file called `index.html` in the _templates folder_. Both the folder and the file do not yet exist, you will get an error if you were to run the application at this point. You'll run it nonetheless so you're familiar with this commonly encountered exception. You'll then fix it by creating the needed folder and file. Save and exit the file. Stop the development server in your other terminal that runs the `hello` application with `CTRL+C`. Before you run the application, make sure you correctly specify the value for the `FLASK_APP` environment variable, since you're no longer using the application `hello`: ```custom_prefix((env)sammy@localhost:$) export FLASK_APP=app flask run ``` Opening the URL `http://127.0.0.1:5000/` in your browser will result in the debugger page informing you that the `index.html` template was not found. The main line in the code that was responsible for this error will be highlighted. In this case, it is the line `return render_template('index.html')`. If you click this line, the debugger will reveal more code so that you have more context to help you solve the problem. ![The Flask Debugger](https://assets.digitalocean.com/articles/webflaskapp/step3a.png) To fix this error, create a directory called `templates` inside your `flask_blog` directory. Then inside it, open a file called `index.html` for editing: ```custom_prefix((env)sammy@localhost:$) mkdir templates nano templates/index.html ``` Next, add the following HTML code inside `index.html`: ```html [label flask_blog/templates/index.html] FlaskBlog

Welcome to FlaskBlog

``` Save the file and use your browser to navigate to `http://127.0.0.1:5000/` again, or refresh the page. This time the browser should display the text `Welcome to FlaskBlog` in an `

` tag. In addition to the `templates` folder, Flask web applications also typically have a `static` folder for hosting static files, such as CSS files, JavaScript files, and images the application uses. You can create a `style.css` style sheet file to add CSS to your application. First, create a directory called `static` inside your main `flask_blog` directory: ```custom_prefix((env)sammy@localhost:$) mkdir static ``` Then create another directory called `css` inside the `static` directory to host `.css` files. This is typically done to organize static files in dedicated folders, as such, JavaScript files typically live inside a directory called `js`, images are put in a directory called `images` (or `img`), and so on. The following command will create the `css` directory inside the `static` directory: ```custom_prefix((env)sammy@localhost:$) mkdir static/css ``` Then open a `style.css` file inside the `css` directory for editing: ```custom_prefix((env)sammy@localhost:$) nano static/css/style.css ``` Add the following CSS rule to your `style.css` file: ```css [label flask_blog/static/css/style.css] h1 { border: 2px #eee solid; color: brown; text-align: center; padding: 10px; } ``` The CSS code will add a border, change the color to brown, center the text, and add a little padding to `

` tags. Save and close the file. Next, open the `index.html` template file for editing: ```custom_prefix((env)sammy@localhost:$) nano templates/index.html ``` You'll add a link to the `style.css` file inside the `` section of the `index.html` template file: ```html [label flask_blog/templates/index.html] . . . <^><^> FlaskBlog . . . ``` Here you use the [`url_for()`](https://flask.palletsprojects.com/en/1.1.x/api/#flask.url_for) helper function to generate the appropriate location of the file. The first argument specifies that you're linking to a static file and the second argument is the path of the file inside the static directory. Save and close the file. Upon refreshing the index page of your application, you will notice that the text `Welcome to FlaskBlog` is now in brown, centered, and enclosed inside a border. You can use the CSS language to style the application and make it more appealing using your own design. However, if you're not a web designer, or if you aren't familiar with CSS, then you can use the [Bootstrap toolkit](https://getbootstrap.com/), which provides easy-to-use components for styling your application. In this project, we'll use Bootstrap. You might have guessed that making another HTML template would mean repeating most of the HTML code you already wrote in the `index.html` template. You can avoid unnecessary code repetition with the help of a _base template_ file, which all of your HTML files will inherit from. See [Template Inheritance in Jinja](https://jinja.palletsprojects.com/en/2.10.x/templates/#template-inheritance) for more information. To make a base template, first create a file called `base.html` inside your `templates` directory: ```custom_prefix((env)sammy@localhost:$) nano templates/base.html ``` Type the following code in your `base.html` template: ```html [label flask_blog/templates/base.html] <^>{% block title %} {% endblock %}<^>
FlaskBlog

About

<^>{% block content %} {% endblock %}<^>
``` Save and close the file once you're done editing it. Most of the code in the preceding block is standard HTML and code required for Bootstrap. The `` tags provide information for the web browser, the `` tag links the Bootstrap CSS files, and the `

Python

How To Use Many-to-Many Database Relationships with Flask-SQLAlchemy

build.cmd for Deploying Python to Functions

How To Set Up Jupyter Notebook with Python 3 on Ubuntu 18.04

How to set cookies with digitalocean functions?

In Functions, how can I know the http method?

Can I deploy to the App Platform without a Dockerfile?

How to login as root in App Platform console

What code needed for App Platform "Worker"

How To Install the Django Web Framework on Ubuntu 22.04

How To Serve Flask Applications with Gunicorn and Nginx on Ubuntu 22.04

How to Use One-to-Many Database Relationships with Flask-SQLAlchemy

How To Install the Anaconda Python Distribution on Ubuntu 22.04

How To Set Up Django with Postgres, Nginx, and Gunicorn on Ubuntu 22.04

How To Install Python 3 and Set Up a Programming Environment on Ubuntu 22.04

How to setup channel on droplet without running into the error Cannot import ASGI_APPLICATION module

Upgrading to multi core

Problems with sessions in django

How to receive UDP packets via a python socket in ubuntu running on digitalocean?

How To Install Python 3 and Set Up a Programming Environment on an Ubuntu 20.04 Server

How To Build a Deep Learning Model to Predict Employee Retention Using Keras and TensorFlow