Flask App in 5 Minutes

I'm a fan of Flask. Flask is a micro web framework written in Python. Here's a quick start guide to creating a new Flask application.

Create a new directory. Create a file called web.py with this contents:

from routes import app 

if __name__ == "__main__": 
    app.run(debug=True, port=5000, host='0.0.0.0')

Feel free to change the above settings as you please.

Save that. Create a routes.py file with this contents:

from flask import Flask, render_template 

app = Flask(__name__) 
app.config.from_object(__name__) 

@app.route('/') 
def hello(): 
   return 'Hello, World!'

Now create your flask venv. I'll use pipenv for this

pipenv --three
pipenv install flask
pipenv run python web.py

Open a web browser to http://localhost:5000 and see your "Hello, World!"

That's literally all there is to it, but this is kind of boring. Let's set up another route.

First, create a folder called 'templates' and within, create a file called layout.html

The layout.html file should look like this. Throw a stylesheet in for fun. I'm using Bulma cause I like the name (references!):

<!DOCTYPE html> 
  <head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Flask!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  </head> 

  <body> 
      <H1>Flask app!</H1> 
      <br /> 
      {% block content %} 
      {% endblock %} 
  </body> 
</html>

Create another template file called "welcome.html" in the same folder with this contents:

{% extends "layout.html" %} 
{% block content %} 
<p><em>This is the Welcome page!</em></p> 
{% endblock %}

Return to the routes.py file and add another route right under our default route.

@app.route('/welcome') 
def welcome(): 
   return render_template("welcome.html")

Restart your flask app and browse to http://localhost:5000/welcome You should see content from the layout.html page as well as the contents we added to the welcome.html page.

Pretty simple, but mostly useless. Let's add something a little more dynamic. Let's change the default route to be more than Hello, World!

@app.route('/welcome') 
def hello(): 
   name = 'AJ' 
   return render_template("index.html", value=name)

Let's create the template that we reference here. Create a new file called index.html in the templates folder with this contents:

{% extends "layout.html" %} 

{% block content %} 
<p><em>Hello, {{ name }}. Welcome to my app!</em></p> 
{% endblock %}

Save it and restart your flask app. Better, but let's let the user decide what their name should be. This will require us to import "request", so in the routes.py file, add that import.

from flask import Flask, render_template, request

Within index.html, create a simple HTML form to prompt for name. The full page should look like this:

{% extends "layout.html" %} 

{% block content %} 
<p><em>What is your name?</em> 
   <form action="/welcome" method="POST"><input name="myName"><input type="submit" value="Submit"></form> 
</p> 
{% endblock %}

Next, edit the welcome route in the routes.py file to request the myName field from the previous page.

@app.route('/welcome', methods=['POST']) 
def welcome(): 
   return render_template("welcome.html", myName=request.form['myName'])

Finally, update the welcome.html page to get the Name from the post.

{% extends "layout.html" %} 
{% block content %} 
<p><em>This is the Welcome page! Hello {{ myName }}</em></p> 
{% endblock %}

I hope you enjoyed this little flask quickstart guide.

Refresh and you'll get a form that you can enter your name. Submit it and you'll be sent to the welcome page with your name on it.

That's it for today!

View this project on Gitlab

Flask App in 5 Minutes

Comments (1)

More from this blog

TMUX Cheatsheet

Resolving "not syncing vfs unable to mount root fs on unknown block" on Linode

git switch

A hidden Vudu API and Searching JSON Data with Python

Deploy a Local DynamoDB for Testing

Command Palette

Comments (1)

More from this blog