Building Your First Web Application with Flask: A Step-by-Step Guide

Zaiba S.A — Tue, 25 Jun 2024 10:29:21 +0000

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>

Home

Hello, Flask!

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>

Home

Hello, Flask!

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.

DEV Community: Zaiba S.A

Building Your First Web Application with Flask: A Step-by-Step Guide

Hello, Flask!

Hello, Flask!