Create Your First Flask Application

May 28, 2018
Create Your First Flask Application

“Create Your First Flask Application” covers the entire process of creating your first flask application on Ubuntu 18.04. We will create a working “Hello World!” Flask application running in the virtual environment that we created and configured in Part 2 of the series. “Create Your First Flask Application” assumes that you have configured your system in a similar manner covered in part 2 of this series, "The Ultimate Guide to Creating a Flask Web Development Environment on Ubuntu 18.04 LTS." If your system is not ready for developing a Flask application yet, follow the tutorial in part 1 before attempting this tutorial.

1. Before we get started, we have to install a few extensions in VSCode. Launch VSCode and click the Extensions button on the toolbar on left of the application window.

Create Your First Flask Application

2. Enter the word “python” into the search bar. Click the green Install button for the package “Python for VSCode.”

Create Your First Flask Application

3. Click the Explorer button on the toolbar on the left of the application window to view what will become our project view.

Create Your First Flask Application

4. Click the View button on the ribbon on top of the application window and choose Integrated Terminal. This will open a terminal in the project view. Enter the following command to create the directory for our Flask application:

mkdir first-flask-app

Press the Enter button on your keyboard to create the directory.

Create Your First Flask Application

5. Enter the following command to enter your newly-created directory then press Enter on your keyboard:

cd first-flask-app

Create Your First Flask Application

6. Now we can open our project in VSCode by clicking the blue Open Folder button in the left pane.

Create Your First Flask Application

7. The file explorer dialogue will now open. Navigate to your Home directory and then double click the project directory we created. Click the orange OK button at the bottom right of the dialogue to open the directory.

Create Your First Flask Application

8. The terminal will now display output instead of the shell. Click the TERMINAL tab in the terminal to return to our shell.

Create Your First Flask Application

9. We must now create a directory to house our .html files. Enter the following command into the terminal to create the directory and press Enter on your keyboard:

mkdir templates

Create Your First Flask Application

10. Your new templates directory is created and is now visible in the pane on the left. We are using Flask’s templating engine, Jinja2, to render our views so have to create our base view first. This will serve as the foundation of every view that we create and will save us a ton of time coding. Enter the following command in the terminal and press the Enter key on your keyboard:

touch ./templates/base.html

Create Your First Flask Application

11. You can now open the base template in VSCode and begin creating the base view. Click on the templates directory in the pane on the left and select our base.html file to open it in the editor.

Create Your First Flask Application

12. First, let’s add our html and head tags like this:


<!doctype html>
<html>
    <head>

    </head>
</html>

Your code should look like this:

Create Your First Flask Application

13. We are going to use Bootstrap 4, a popular front-end framework, to style our Flask application. The CDN option for adding Bootstrap to our application will work perfectly fine. Copy and paste the following to between the head tags:


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>{{ title }}</title>

The result should look like this:

Create Your First Flask Application

14. Now we can add our body and Bootstrap 4 script tags to complete adding Bootstrap 4 to our project. Copy and paste the following into your base.html file under the closing head tag:


<body>
     
    {% block content %} 
    {% endblock %}
                                            
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
                                            
</body>

The result should look like this:

Create Your First Flask Application

15. Bootstrap 4 is now added to our project and we can use all of the classes available in Bootstrap to style our Flask application. Let’s create our first actual view that will use base.html as its foundation. In the terminal enter the following command and press Enter on your keyboard:

touch ./templates/home.html

Create Your First Flask Application

16. Open home.html in the editor by clicking on it in the left pane. Add the following code to home.html:


{% extends "base.html" %} 
{% block content %} 

<h1>Hello, World!</h1>

{% endblock %} 

The result should look like this:

Create Your First Flask Application

17. As you can see, we “extended” our base.html template and saved ourselves a lot of time! We will now create our python file, the back-end of our Flask application. Enter the following into the terminal and press the Enter key on the keyboard:

touch main.py

Create Your First Flask Application

18. Let’s activate our virtual environment by entering the following command into the terminal and pressing the Enter key:

source activate flask-env

Create Your First Flask Application

19. Next, navigate to the main.py file we created in the pane on the left. Open it in the editor by clicking on it and enter the following to the top of the file to import the utilities we need to run our Flask application:

from flask import Flask, request, redirect, render_template

Create Your First Flask Application

20. We will now initialize our Flask application and turn debugging on. Copy and paste the following into the main.py file:


app = Flask(__name__) 
app.config['DEBUG'] = True

Create Your First Flask Application

21. We will finish up our main.py file by adding the following code:


@app.route('/') 
def home(): 
    return render_template('home.html', title='Home') 
    
if __name__ == '__main__': 
    app.run()

The result should look like this:

Create Your First Flask Application

22. That’s all there is to creating our first Flask application! Enter the following into the terminal to start the Flask server and press Enter on your keyboard:

python main.py

The result should look like this:

Create Your First Flask Application

23. Now, open a web browser and enter the following into the address bar and press the Enter key on your keyboard:

http://127.0.0.1:5000

Create Your First Flask Application

You will be greeted with the home page that you created. Congratulations, you have successfully built your first Flask application! To stop your Flask application, enter the CTRL + C into the terminal.

Continue to Part 4