Building Your First Web Application with Flask

Building Your First Web Application with Flask

In our previous post, we walked you through the installation process of Flask, a lightweight and flexible web framework for Python. Now that you have Flask installed, it’s time to dive into building your first web application. This tutorial will guide you through the steps to create a simple web application using Flask.

Step 1: Setting Up Your Project

First, let’s create a new directory for your Flask project. Open your terminal or command prompt and run the following commands:

mkdir my_flask_app
cd my_flask_app

Next, create a virtual environment to keep your project dependencies isolated:

python -m venv venv

Activate the virtual environment:

  • On Windows: 
    venv\Scripts\activate
  • On macOS/Linux: 
    source venv/bin/activate

With the virtual environment activated, install Flask:

pip install Flask

Step 2: Creating Your First Flask Application

Create a new Python file named app.py in your project directory and add the following code:

from flask import Flask

app = Flask(__name__)

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

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

This code sets up a basic Flask application with a single route (/) that returns the text “Hello, Flask!”.

Step 3: Running Your Flask Application

To run your Flask application, execute the following command in your terminal:

python app.py

You should see output indicating that the Flask development server is running. Open your web browser and navigate to http://127.0.0.1:5000/. You should see the message “Hello, Flask!”.

Step 4: Adding More Routes

Let’s add a few more routes to our application. Update your app.py file as follows:

from flask import Flask

app = Flask(__name__)

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

@app.route('/about')
def about():
    return "This is the about page."

@app.route('/contact')
def contact():
    return "This is the contact page."

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

Now, if you navigate to http://127.0.0.1:5000/about or http://127.0.0.1:5000/contact, you will see the respective messages for those routes.

Step 5: Using Templates

Flask allows you to use templates to render HTML pages. Create a new directory named templates in your project directory. Inside the templates directory, create a new file named index.html 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>Home</title>
</head>
<body>
    <h1>Welcome to My Flask App</h1>
    <p>This is the home page.</p>
</body>
</html>

Update your app.py file to use this template:

from flask import Flask, render_template

app = Flask(__name__)

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

@app.route('/about')
def about():
    return "This is the about page."

@app.route('/contact')
def contact():
    return "This is the contact page."

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

Now, when you navigate to http://127.0.0.1:5000/, you will see the HTML content from index.html.

Conclusion

Congratulations! You’ve built your first web application using Flask. In this tutorial, we covered setting up a Flask project, creating routes, and using templates to render HTML pages. Flask is a powerful and flexible framework that allows you to build web applications quickly and efficiently. In future posts, we will explore more advanced features of Flask, such as handling forms, working with databases, and deploying your application.

Stay tuned for more Flask tutorials!