Building Your First Flask App

A Beginner’s Guide to make you first flask app

4 min readFeb 17, 2024

Are you looking to kick start your journey into web development?

Flask, a micro web framework written in Python, might just be the perfect starting point for you. In this guide, we’ll walk through the process of creating a basic Flask application from scratch. By the end, you’ll have a solid understanding of how Flask works, including templates, static folders, and where to use Flask in your projects.

https://flask.palletsprojects.com/en/3.0.x/

Getting Started with Flask

Flask is known for its simplicity and ease of use, making it a popular choice for building web applications, especially for beginners. To get started, you’ll need to have Python installed on your system. Once Python is installed, you can install Flask using pip, Python’s package manager.

pip install flask

With Flask installed, let’s create our first Flask app.

Creating a Basic Flask App

First, create a new directory for your project and navigate into it:

mkdir my_flask_app
cd my_flask_app

Now, create a new Python file, let’s call it app.py, and open it in your favorite text editor.

from flask import Flask

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run(debug=True)

In this simple Flask app, we import the Flask class from the Flask module and create a new instance of the Flask class called app.

We then use the @app.route() decorator to define a route for the root URL '/'.

When a user visits this URL, the hello() function is executed, returning the string 'Hello, Flask!'.

To run the app, execute the following command in your terminal:

python app.py

Now, if you open a web browser and navigate to http://127.0.0.1:5000/, you should see the message "Hello, Flask!" displayed in the browser window.

Using Templates in Flask

While returning strings directly from route functions works for simple applications, it’s not practical for larger projects. Flask allows us to render HTML templates using the Jinja2 template engine.

First, create a directory named templates in your project directory. This is where Flask will look for HTML templates.

mkdir templates

Next, create a new HTML file inside the templates directory, let's call it index.html, and add some basic HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
</head>
<body>
    <h1>Hello, Flask!</h1>
</body>
</html>

Now, update the hello() function in app.py to render this HTML template:

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)

With this change, when a user visits the root URL '/', Flask will render the index.html template and return it to the user's browser.

Using Static Files in Flask

In addition to HTML templates, Flask also allows us to serve static files such as CSS, JavaScript, and images. To do this, create a directory named static in your project directory.

mkdir static

Now, you can add your static files, such as CSS stylesheets or JavaScript scripts, to the static directory. Flask will serve these files directly to the client without any processing.

For example, you could create a CSS file named styles.css inside the static directory:

/* static/styles.css */
body {
    background-color: #5f5f5f;
    font-family: Arial, sans-serif;
    text-align: center;
}

To link this CSS file to your HTML templates, you can use the url_for() function provided by Flask:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Hello, Flask!</h1>
</body>
</html>

Conclusion

Congratulations!

You’ve successfully built your first Flask application.

In this guide, we covered the basics of creating a Flask app, including defining routes, using templates to render HTML, and serving static files.

Flask is a powerful and flexible framework that can be used to build a wide range of web applications, from simple prototypes to complex, production-ready systems.