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

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. …


This content originally appeared on DEV Community and was authored by Zaiba S.A

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.


This content originally appeared on DEV Community and was authored by Zaiba S.A


Print Share Comment Cite Upload Translate Updates
APA

Zaiba S.A | Sciencx (2024-06-25T10:29:21+00:00) Building Your First Web Application with Flask: A Step-by-Step Guide. Retrieved from https://www.scien.cx/2024/06/25/building-your-first-web-application-with-flask-a-step-by-step-guide/

MLA
" » Building Your First Web Application with Flask: A Step-by-Step Guide." Zaiba S.A | Sciencx - Tuesday June 25, 2024, https://www.scien.cx/2024/06/25/building-your-first-web-application-with-flask-a-step-by-step-guide/
HARVARD
Zaiba S.A | Sciencx Tuesday June 25, 2024 » Building Your First Web Application with Flask: A Step-by-Step Guide., viewed ,<https://www.scien.cx/2024/06/25/building-your-first-web-application-with-flask-a-step-by-step-guide/>
VANCOUVER
Zaiba S.A | Sciencx - » Building Your First Web Application with Flask: A Step-by-Step Guide. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/25/building-your-first-web-application-with-flask-a-step-by-step-guide/
CHICAGO
" » Building Your First Web Application with Flask: A Step-by-Step Guide." Zaiba S.A | Sciencx - Accessed . https://www.scien.cx/2024/06/25/building-your-first-web-application-with-flask-a-step-by-step-guide/
IEEE
" » Building Your First Web Application with Flask: A Step-by-Step Guide." Zaiba S.A | Sciencx [Online]. Available: https://www.scien.cx/2024/06/25/building-your-first-web-application-with-flask-a-step-by-step-guide/. [Accessed: ]
rf:citation
» Building Your First Web Application with Flask: A Step-by-Step Guide | Zaiba S.A | Sciencx | https://www.scien.cx/2024/06/25/building-your-first-web-application-with-flask-a-step-by-step-guide/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.