Flask Introduction

1. Setting Up Flask

Step 1: Install Flask

First, create a new project folder and navigate into it:

mkdir flask_project
cd flask_project

Create a virtual environment (optional but recommended):

python -m venv venv
source venv/bin/activate  # On Mac/Linux
venv\Scripts\activate     # On Windows

Now, install Flask using pip:

pip install flask

2. Creating a Simple Flask App

Step 2: Create a Flask Application

Create a new Python file, app.py, inside the project folder:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Welcome to Flask!"

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

3. Running the Flask Server

Step 3: Start the Flask Application

Run the following command:

python app.py

If everything is set up correctly, you will see output similar to:

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Now, open http://127.0.0.1:5000/ in your browser. You should see:

Welcome to Flask!

@app.route("/about")
def about():
    return "This is the About Page."

@app.route("/contact")
def contact():
    return "Contact us at contact@example.com"

4. Creating Additional Routes

Flask allows you to define multiple routes for different pages.

Step 4: Add More Routes

Modify app.py to include more routes:

@app.route("/about")
def about():
    return "This is the About Page."

@app.route("/contact")
def contact():
    return "Contact us at contact@example.com"

5. Using HTML Templates

Instead of returning plain text, Flask allows you to use HTML templates for a better user experience.

Step 5: Create a Templates Folder

Inside your project directory, create a templates/ folder and add an index.html file inside it:

flask_project/
│── templates/
│   ├── index.html
│── app.py

Add the following content to templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Home</title>
</head>
<body>
    <h1>Welcome to Flask Home Page</h1>
    <p>This is a simple Flask web application.</p>
</body>
</html>

Step 6: Update `app.py` to Render the HTML Template

Modify app.py to use Flask’s render_template function:

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)

6. Adding Static Files (CSS, JS, Images)

To enhance your web pages, you can use static files such as CSS, JavaScript, and images.

Step 7: Create a Static Folder

Inside your project folder, create a static/css/ folder:

flask_project/
│── static/
│   ├── css/
│   │   ├── styles.css
│── templates/
│   ├── index.html
│── app.py

Add a styles.css file inside static/css/ with the following content:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    margin: 50px;
}

h1 {
    color: #333;
}

Step 8: Link CSS in `index.html`

Modify index.html to include the stylesheet:

<head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
</head>

Restart Flask and reload the page to see the updated styles.

pip install gunicorn

Run Flask with Gunicorn:

gunicorn -w 4 app:app

Deploy on Heroku, Render, or AWS using Git.

Conclusion

In this guide, you have learned:

✅ What Flask is and why it is useful
✅ How to install Flask and set up a project
✅ How to create routes and return HTML pages
✅ How to use templates and static files
✅ How to deploy a Flask application

PYTHON FLASK