Flask Tutorials: Current App Pattern 🎯

Welcome to the Flask Tutorials at CodeYourCraft! In this lesson, we'll dive into the popular micro-web framework for Python, Flask, and build a complete web application from scratch. Let's get started!

What is Flask? 📝

Flask is a lightweight, easy-to-use, and flexible web application framework that enables you to build web applications in Python. It's perfect for beginners due to its simplicity, yet powerful enough for experienced developers to create complex applications.

Installation 💡

Before we dive into building our first application, let's make sure Flask is installed on your system.

bash

pip install flask

Creating Our First Flask Application 🎯

Now that Flask is installed, let's create our first Flask application.

Create a new folder for your project, e.g., my_app.
Navigate to the project folder:

bash

cd my_app

Inside the project folder, create a new file named app.py.
Open app.py and paste the following code:

python

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, World!"

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

Run the application:

bash

python app.py

Open your web browser and navigate to http://127.0.0.1:5000/. You should see the message: "Hello, World!"

💡 Pro Tip: Don't forget to save your changes before running the application.

Understanding the Code 📝

Let's break down the code and understand what's happening:

Import the Flask module and create a Flask web server using app = Flask(__name__).
The @app.route('/') decorator tells Flask to bind the home function to the root URL of our application.
The home function returns the message "Hello, World!" when the root URL is accessed.
The if __name__ == '__main__': block ensures the server runs only when the script is executed directly, not when it's imported as a module.

Extending Our Application 🎯

Now that we have a basic understanding of Flask, let's build a more complex application with multiple routes and static files.

Create a new folder named static inside the my_app folder.
Inside the static folder, create a new folder named css.
Inside the css folder, create a new file named styles.css.
Add some CSS styles to styles.css:

css

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

Modify the app.py file to include the static files and multiple routes:

python

from flask import Flask, render_template, url_for, send_from_directory
app = Flask(__name__)
app.static_folder = 'static'

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

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

@app.route('/static/css/styles.css')
def send_styles():
    return send_from_directory(directory='static/css', filename='styles.css')

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

Create two new HTML files, home.html and about.html, in the my_app folder:

html

<!-- home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>Welcome to My Flask App</h1>
    <p><a href="{{ url_for('about') }}">About Us</a></p>
</body>
</html>

html

<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About Us</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>About My Flask App</h1>
    <p><a href="{{ url_for('home') }}">Back to Home</a></p>
</body>
</html>

Run the application:

bash

python app.py

Open your web browser and navigate to http://127.0.0.1:5000/. Click the "About Us" link to see the second page.

💡 Pro Tip: Don't forget to save your changes before running the application.

Quiz 🎯

Question: What does the @app.route decorator in Flask do?

A: It creates a new Flask application. B: It binds a function to a specific URL in the application. C: It sets the static folder for the application.

Correct: B

Explanation: The @app.route decorator binds a function to a specific URL in the Flask application.

That's it for this tutorial! You now have a solid foundation for building web applications with Flask. Keep exploring, experimenting, and learning, and you'll soon be creating amazing projects! Happy coding! 🚀