How to Build Your First Web App in Less Than 10 minutes

The basics of the Flask framework with Python.

Python is a trending language for building web apps thanks to frameworks like Django and Flask that are widely used across the web dev community.

For today’s story, I chose Flask over Django since it’s a more beginner-friendly framework, it’s lightweight, and will require less setup time.

Flask is a more lightweight and beginner-friendly framework.

But without further talk let’s jump into it.

Setup the framework

Install Flask

The first thing you wanna do is install Flask on your local machine or your server.

To do that, nothing complicated thanks to the PIP tool :

For Linux :

pip3 install flask

Or for windows :

pip install flask

Create the App Object

Once this is installed, create a Python file.

Name the files mindfully since programming projects tend to just become a huge ununderstandable mess over time.

Then, import the Flask class from the flask module.

from flask import Flask

The Flask class is the main class of your application. You need to instantiate it to have your web app.

web_app = Flask("a-super-name")

You can give any name you want to your web app, it won’t affect today’s tutorial.

Your First Endpoint

Once the app is created, you need to define what we call endpoints. An endpoint is just an URL that will be accessible from your app.

In Flask, endpoints are just defined as functions (with a decorator).

Let’s create our first endpoint, something like a HelloWorld endpoint. The first thing to do is to create a function:

def helloworld():
	pass

To turn our function into an endpoint, we need to decorate it (decorators are just a way to “upgrade” functions):

@web_app.route("/")
def helloworld():
	pass

As you can see, you have to pass arguments to the decorator to define your endpoint, the only mandatory parameter is the endpoint’s URL, here a slash (alone) just means no specific address.

Okay, we have our endpoint, but for now, it does absolutely nothing. Let’s give it life, by adding a return value:

@web_app.route("/")
def helloworld():
	return "I'm alive!"

And there you have, a complete working endpoint.

The last step is to run the web app:

web_app.run()

At this point, your file should look something like that:

from flask import Flask

web_app = Flask("a-super-name")

@web_app.route("/")
def helloworld():
	return "I'm alive!"

web_app.run()

You can now run your Python file:

python3 webapp.py

And you should see a message that looks like that:

* Serving Flask app 'a-super-name' (lazy loading)
* Environment: production
  WARNING: This is a development server. Do not use it in a production deployment.
  Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

As you can see at the bottom line, the web app is running on http://127.0.0.1:5000 . You might see a different address, but that doesn't matter, just copy and paste this URL in a web browser, and you should see something like that:

I'm alive!

And that’s it, you have your web app ready for production… Well, no, not exactly.

Yes Python is awesome, and yes Flask is a very well-made framework, but don’t you believe you can have a production-ready web app in 6 lines of code!

Let’s go a bit further into our exploration of Flask.

Return HTML

So far we just sent a text (string) as a response, but did you ever see a web page composed of text?

No, of course not, web pages are HTML most of the time (if not always).

I won’t explain to you how does HTML work here, and I will assume you got some basic knowledge.

Your web browser (the one that requests the webpage) expects HTML, because of that, if you send HTML as text, the browser will understand it.

Let’s improve our endpoint to send back a simple HTML message:

@web_app.route("/")
def helloworld():
	return "<p>I'm <strong>alive</strong>!</p>"

Now you can restart your program and reload the page, and you should see the word “alive” in bold.

That’s cool, our web app now returns HTML!

Debug Mode

Something quite annoying when working on your app is to have to restart the program each time you make any change. Luckily, as always with Python, things are well made. Flask has a debug mode, that allows changes to happen without restarting your program. Let’s enable it:

It’s not complicated, just add a keyword argument to the run method:

web_app.run(debug=True)

And now, you can restart your app (one last time):

* Serving Flask app 'a-super-name' (lazy loading)
* Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 775-216-152

And as you can see, the app is now in debug mode.

Now, let’s see what happens if you make a change to the file:

* Detected change in '/path/app.py', reloading
* Restarting with stat
* Debugger is active!
* Debugger PIN: 775-216-152

As you can see, the app reloads by itself, which is frankly really useful.

HTML Templates

The last thing I want to show you today, as it’s really practical, is templates. HTML templates are Flask must-knows.

HTML in a Separated File

We saw previously how to return HTML, just as string, but let’s be honest, it’s not practical at all, who would write HTML in a string inside of a Python file??

No, it’s a lot better to write your HTML in a .html file, and templates are made to do that, and actually, they can do more than that.

It’s always better to separate your code into different files, particularly to separate mark up from code.

We’ll focus on the Python part, that is to say, loading the template and returning it, then I will tell you more about templates.

Before everything, to load a template, you need to import render_template from Flask:

from flask import Flask, render_template

Now, in our endpoint, we can use that function to load an HTML template:

@web_app.route("/")
def helloworld():
    return render_template("first-template.html")

You can choose any other name for your HTML file.

Writing Templates

Before going any further, we need a file, so let’s create it (the name must match the one you placed in your function call).

This file must be placed in a templates/ folder. (Flask automatically looks for the template here. That can be changed, but that's for another article.)

If you’re familiar with HTML, you know every HTML file must start by specifying the doctype, here is a pattern you can copy-paste before continuing:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A simple template</title>
</head>
<body>
    <!-- Content -->
</body>
</html>

As you can see, for now, it’s just pure HTML, we’ll see in a minute how to add more functionality to it.

Before that, let’s add some content to the file so that we can check everything is working well:

<body>
    <p>I'm alive as a <strong>template</strong>!</p>
</body>

Again, we’re not focusing on HTML here, I just copy-pasted the HTML we used previously.

Now, save your file if it’s not already done, and go to your app, you should see this (or any content you’ve put in the HTML’s body):

I'm alive as a template!

Extended Functionality

Flask uses the Jinja template, let’s see how to use this tool to your advantage.

First, it allows you to create one “base” HTML template, and then to be able to write quickly new pages to your web app. Here is how it works:

In your base template, you have to include blocks. Don’t worry, it’s not complicated.

Imagine you want your base template to be changeable in two ways, you want to be able to change the title for each page, and the content of the body. Your base-template.html should look like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

You can see these weird {% ... %} statements, well, these are the so-called blocks. It just means that when you will "extend" (we'll see that in a minute) this template, you will overwrite this block, that is to say, give it a new value.

Extend the Template

Now let’s see how to extend a template. You need a second file, let’s call it, extended-template.html .

The first thing to write is what template are we extending:

{% extends 'first-template.html' %}

Then we can give a value to each block. The syntax is the same as in the base.

For the title block:

{% block title %} An extended template {% endblock %}

And for the content:

{% block content %}
	<p>I'm alive as an <strong>extended</strong> template!</p>
{% endblock %}

At this point, your extended file should look like that:

{% extends 'first-template.html' %}

{% block title %} An extended template {% endblock %}

{% block content %}
	<p>I'm alive as an <strong>extended</strong> template!</p>
{% endblock %}

The last thing we have to do is change which template we load in our Python file. Instead of loading first-template.html, we want to load extended-template.html :

return render_template("extended-template.html")

You can now reload your web app (by saving the Python file).

And you should see something similar to this:

I'm alive as an extended template!

And I think I’ll just wrap things up there.

Thanks for reading, and see you soon!

Become a medium member to read all my next stories as well as others’!

See you in the next story 👋

More content at plainenglish.io