Flask Home

1. Setting Up Flask

Step 1: Install Flask

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

mkdir flask_home
cd flask_home

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:

pip install flask

2. Creating a Flask Application

Step 2: Create a Flask App File

Inside the flask_home directory, create a new Python file, app.py:

from flask import Flask

app = Flask(__name__)

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

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

3. Running the Flask Application

Step 3: Start the Flask Server

Run the following command:

python app.py

* 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:

4. Creating an HTML Home Page

Instead of returning a plain string, let's use an HTML template.

Step 4: Create a Templates Folder

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

flask_home/
│── 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 5: Update `app.py` to Render the HTML Template

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

flask_home/
│── 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 7: 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>

6. Deploying the Flask App

Once your Flask app is running locally, you can deploy it using Render, Vercel, or Heroku.

Step 8: Using Flask to Deploy with Gunicorn

Install Gunicorn (for production servers):

pip install gunicorn

2. Run Flask with Gunicorn:

gunicorn -w 4 app:app

Deploy on Heroku, Render, or AWS using Git.

Deploy on Heroku, Render, or AWS using Git.

Conclusion

In this guide, you have learned how to:

✅ Set up a Flask application
✅ Create a home page using HTML and CSS
✅ Use Flask templates and static files
✅ Deploy the Flask app for production

Now, you can build and scale Flask applications easily! 🚀

PYTHON FLASK