Skip to main content

Build Your First Web App with Flask: A Complete Guide

· 4 min read
Jesus Paz
Jesus Paz
Python Expert & Solo Founder Empowering Developers

Are you dreaming of building your own web applications but feel lost in the sea of programming languages and frameworks? You’re not alone! Many find the idea of creating a web app intimidating, especially if you’re just getting started with coding. Thankfully, Flask—a lightweight and easy-to-use Python web framework—makes web programming accessible and enjoyable. In this tutorial, you’ll learn not just the basics of using Flask, but also how to set up a simple web application from scratch! By the end, you’ll have a working web app and the confidence to create more complex projects. Let's dive in!

What is Flask?​

Flask is a micro web framework for Python. It's designed to be simple and flexible, letting you build web applications quickly without a lot of overhead. Here are some reasons why you’d want to use Flask:

  • Lightweight: Minimal setup is required to get started.
  • Flexible: You don’t have to follow strict rules, allowing you to customize your app as needed.
  • Documentation: Excellent documentation and a huge community to help you along the way.

Setting Up Your Environment​

Before we start building, let’s ensure you have everything in place. You’ll need:

  1. Python: Make sure you have Python installed. You can download it from python.org.
  2. Flask: Install Flask via pip. Open your command line and type: 
    pip install Flask

Your First Flask Application​

Let’s create a simple web application step by step:

  1. Create a new directory for your project: 
    mkdir my_flask_app
    cd my_flask_app
  2. Create a new file named app.py: 
    touch app.py
  3. Write your first Flask application: Open app.py in your favorite text editor and add the following code: 
    from flask import Flask

    app = Flask(__name__)

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

    if __name__ == '__main__':
        app.run(debug=True)
  4. Run your application: In your command line, run: 
    python app.py
    Open your web browser and visit http://127.0.0.1:5000/. You should see Hello, World! displayed.

Adding More Routes​

Now let’s add more pages to your application:

  1. Add another route beneath the existing one: 
    @app.route('/about')
    def about():
        return "This is the about page."
  2. Visit http://127.0.0.1:5000/about in your browser to see the new page.

Templates and Static Files​

To make your application visually appealing, we can add HTML templates:

  1. Create a templates folder and a simple index.html file inside it: 
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Flask App</title>
    </head>
    <body>
        <h1>Welcome to My Flask App</h1>
    </body>
    </html>
  2. Modify your home function in app.py to render this HTML: 
    from flask import Flask, render_template

    @app.route('/')
    def home():
        return render_template('index.html')
  3. Refresh your web browser—now your application should display your HTML template!

Conclusion​

Congratulations! You have successfully built a simple web application using Flask. You learned how to set up routes, create HTML templates, and display them in your browser. The world of Python for web programming is vast, and Flask is just the beginning. With this knowledge, you can continue to explore more complex applications, integrating databases, user authentication, or even APIs.

Feeling inspired? Why not take your learning a step further by building your next project?

Frequently Asked Questions​

Q: What is Flask best used for?

A: Flask is best used for small to medium web applications, RESTful APIs, and for developers who need more control over their application structure.

Q: Is Flask suitable for beginners?

A: Absolutely! Flask's simplicity and flexibility make it an excellent choice for beginners in web development.

Q: Can I use Flask with a database?

A: Yes, Flask can easily integrate with databases such as SQLite, PostgreSQL, or MongoDB using libraries like SQLAlchemy.

Q: What are templates in Flask?

A: Templates in Flask are HTML files that allow you to separate your application's presentation layer from its business logic, enabling reusable components.

Q: Do I need to know HTML/CSS to build a Flask application?

A: While it's not strictly required, having a basic understanding of HTML and CSS will greatly enhance your Flask projects.

Conclusion​

In this tutorial, you've taken the first steps into the exciting world of web development using Flask. You've set up a basic application, added routes, and managed templates. Remember, practice makes perfect! Take what you’ve learned and start building something unique. If you enjoyed this post, share it with others and let your journey in Python for web programming continue! Happy coding!