DEV Community

Cover image for How to Create a Simple Web App with Flask for Python Beginners (Bite-size Article)
koshirok096
koshirok096

Posted on

How to Create a Simple Web App with Flask for Python Beginners (Bite-size Article)

Introduction

I am usually a programmer who focuses on web development. However, recently, I've had more opportunities to use Python for various reasons (though I'm still a beginner with Python). Given my background in web development, I started to wonder, "Is it possible to run functions created in Python on the web?"

To solve this question, I did some research and found that using a micro web framework called Flask, it is quite easy to run Python functions on the web. In this post, I'd like to share how to use Flask with you all.

Image description

Creating the Project Directory and Setting Up the Virtual Environment

First, create a directory for your project. Open your terminal or command prompt and run the following commands:

mkdir my_flask_app
cd my_flask_app
Enter fullscreen mode Exit fullscreen mode

Next, create a Python virtual environment to manage dependencies for your project:

python -m venv venv
Enter fullscreen mode Exit fullscreen mode

Then, activate the virtual environment.

On Windows:

venv\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

On macOS/Linux:

source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

Image description

Installing Flask

With the virtual environment activated, install Flask:

pip install flask
Enter fullscreen mode Exit fullscreen mode

Creating the requirements.txt File

Save the current environment's dependencies to a requirements.txt file:

pip freeze > requirements.txt
Enter fullscreen mode Exit fullscreen mode

Setting Up the Project Directory Structure

Create the directories and files using the following commands:

mkdir static templates
touch app.py config.py
Enter fullscreen mode Exit fullscreen mode

Place static files like CSS, JavaScript, and images in the static directory. HTML templates should be placed in the templates directory.

Basic Flask Application Setup and Creating Template Files

Edit the app.py file to create a basic Flask application:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', message="Heyyy, Flask!")

if __name__ == '__main__':
    app.run(debug=True)
Enter fullscreen mode Exit fullscreen mode

Next, create the index.html file in the templates directory and enter the following code:

<!doctype html>
<html>
<head><title>Flask App</title></head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This time, let's simply display a message.

Running the Application

In your terminal or command prompt, run the following command:

python app.py
Enter fullscreen mode Exit fullscreen mode

When you run the application, you will be able to access the page from your browser. If everything is set up correctly, you should see the message "Heyyy, Flask!" displayed.

The completed directory structure will look like this:

/my_flask_app
│
├── app.py
├── config.py
├── requirements.txt
├── /static
│   ├── /css
│   ├── /js
│   └── /images
│
└── /templates
    └── index.html
Enter fullscreen mode Exit fullscreen mode

With this, we have created a basic project directory for Flask and run a simple application. In this article, it only covered displaying a message on a page, but for those interested, you can further expand the project and add more features.

Image description

Conclusion

Today I introduced how to a simple web application using Flask, especially for the Python beginners. Recently, I've been developing some business tools using Python and running them in a local environment. I wondered if I could get these tools to run in a browser, which led me to explore and learn about Flask. I wanted to share what I’ve learned with everyone.

Even though my experience with Python is still relatively new, I found setting up an environment with Flask to be straightforward and user-friendly. If you're interested, I encourage you to follow these steps and try it out for yourself. Feel free to expand and add more features as you see fit.

Thank you for reading!

Top comments (0)