How to Create a Simple Web App with Flask for Python Beginners (Bite-size Article)
Tags: beginners, flask, python
Published: 2024-06-07 20:27:14

#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ijhed5w04n8mpvh5v2u.png)



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

```sh
mkdir my_flask_app
cd my_flask_app
```

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

```sh
python -m venv venv
```

Then, activate the virtual environment.

## On Windows:

```shell
venv\Scripts\activate
```

## On macOS/Linux:
```shell
source venv/bin/activate
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otsmn74zw23b9b9ugmgz.png)



#Installing Flask
With the virtual environment activated, install Flask:

```sh
pip install flask
```

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

```sh
pip freeze > requirements.txt
```

#Setting Up the Project Directory Structure
Create the directories and files using the following commands:

```sh
mkdir static templates
touch app.py config.py
```

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:

```python
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)
```

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

```html
<!doctype html>
<html>
<head><title>Flask App</title></head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>
```

This time, let's simply display a message.

#Running the Application
In your terminal or command prompt, run the following command:

```sh
python app.py
```
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:


```bash
/my_flask_app
│
├── app.py
├── config.py
├── requirements.txt
├── /static
│   ├── /css
│   ├── /js
│   └── /images
│
└── /templates
    └── index.html
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9999lwbptijts78ou4m.png)



#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!