Developing Your First Flask Application in Python (99/100 Days of Python)

4 min readApr 10, 2023

Day 99 of the “100 Days of Python” blog post series covering Flask applications

Flask is a lightweight web framework for Python that allows developers to build web applications quickly and easily. Its minimalistic approach and flexibility make it an ideal choice for small to medium-sized projects. In this tutorial, we will walk you through the process of developing a Flask application from scratch, covering everything from setting up your environment to deploying your app.

To start building your Flask application, you need to install the Flask package. You can do this using pip, the Python package manager:

pip install Flask

Set Up Your Project

Create a new directory for your project and navigate to it in your terminal. Inside the project directory, create a new file named app.py. This will be the main file for your Flask application.

project_directory/
    app.py

Create Your First Flask Application

In the app.py file, we can add the minimal code required to start a Flask application:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def home():
    return 'Hello from 100 Days of Python!'


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

This code imports the Flask module and creates an instance of the Flask class, which we’ve named app. The @app.route('/') decorator maps the URL path / to the home() function. When a user navigates to the root URL of your application, the home() function is called, and it returns the string "Hello from 100 Days of Python!".

To run the Flask application, navigate to your project directory and run the following command in your terminal:

python app.py

You should see an output like the following:

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 121-944-723

Your Flask application is now running! Open a web browser and navigate to http://127.0.0.1:5000/. You should see the “Hello from 100 Days of Python!” message.

Templates and Static Files

To make your Flask application more dynamic, you can use HTML templates and static files, such as CSS and JavaScript.

Create two new folders inside your project directory named templates and static. Inside the templates folder, create a new file named index.html. Inside the static folder, create two new folders named css and js. Your project structure should now look like this:

project_directory/
    app.py
    static/
        css/
        js/
    templates/
        index.html

Modify the Flask application to use templates

Update the app.py file to use the index.html template. First, import the render_template function from the flask module. Then, modify the home() function to return the rendered template instead of the string.

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def home():
    return render_template('index.html')


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

Create the HTML template

Now, open the index.html file in the templates folder and add the following HTML code:

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

Add static files (CSS and JavaScript)

To style your application, create a new file named main.css inside the css folder under the static directory. Add some basic CSS rules to the file:

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    text-align: center;
    padding: 20px;
}

Next, if you want to add JavaScript to your application, create a new file named main.js inside the js folder under the static directory. For this tutorial, we’ll keep it simple and add a basic console message:

console.log('Hello from 100 Days of Python!');

Link the static files to the HTML template

To use the CSS and JavaScript files in your application, you need to link them in the index.html file. Update the index.html file as follows:

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

Now, when you run your Flask application and refresh the browser, you should see the updated styles and the JavaScript console message.

Deploy the Flask Application

When you are ready to deploy your Flask application, there are several options available. Some popular choices include Heroku, PythonAnywhere, and AWS Elastic Beanstalk. The process for deployment varies depending on the platform, so make sure to follow the documentation specific to your chosen service.

What’s next?

If you found this story valuable, please consider clapping multiple times (this really helps a lot!)
Hands-on Practice: Free Python Course
Full series: 100 Days of Python
Previous topic: Time Series Analysis with Python using Prophet
Next topic: The Grand Finale