Building Your First Web Application with Flask: A Step-by-Step Guide
Tags: flask, python, webdev, webapp
Published: 2024-06-25 10:29:21

Flask is a lightweight web framework for Python, making it easy to get started with web development. In this guide, we'll create a simple web application using Flask and the command line.

**Step 1: Install Flask**
First, ensure you have Python installed. You can check by running:
python --version
Next, install Flask using pip:
pip install Flask

**Step 2: Set Up Your Project**
Create a directory for your project:
mkdir my_flask_app
cd my_flask_app

Create a virtual environment to manage dependencies:
python -m venv venv

source venv/bin/activate  # On Windows, use `venv\Scripts\activate`

**Step 3: Create the Flask Application**

Create a file named app.py and open it in your text editor:
touch app.py

Add the following code to app.py:

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 "Hello, Flask!".

**Step 4: Run Your Flask Application**
To run your Flask application, use the following command:

python app.py
You should see output indicating that the Flask development server is running. Open your web browser and go to http://127.0.0.1:5000/ to see the "Hello, Flask!" message.

**Step 5: Add More Routes**
Let's add another route to our application. Update app.py to include a new route:

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."
if __name__ == "__main__":
    app.run(debug=True)

Now, if you visit http://127.0.0.1:5000/about, you'll see the message "This is the about page."

**Step 6: Use Templates**
To serve HTML content, Flask uses templates. Create a directory named templates:

mkdir templates
Create a file named home.html inside the templates directory:
touch templates/home.html

Add the following HTML content to home.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>Hello, Flask!</h1>
</body>
</html>
Update app.py to render this template:

from flask import Flask, render_template

app = Flask(__name__)

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

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

if __name__ == "__main__":
    app.run(debug=True)
Now, visiting http://127.0.0.1:5000/ will render the HTML content from home.html.

**Step 7: Add Static Files**
Flask also supports static files like CSS and JavaScript. Create a directory named static:

mkdir static
Create a CSS file named style.css inside the static directory:

touch static/style.css
Add some CSS to style.css:

body {
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
}
Update home.html to include this CSS file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Hello, Flask!</h1>
</body>
</html>

Conclusion
Congratulations! You've built a simple web application using Flask. You've learned how to:

Set up a Flask project
Create routes
Serve HTML templates
Include static files

Flask is a powerful and flexible framework. From here, you can explore more advanced features such as form handling, database integration, and user authentication.