DEV Community

Viktor Martynov
Viktor Martynov

Posted on • Edited on

Creating a Web Application with Python Using the Flask Framework

Flask is a powerful yet minimalistic framework for building web applications in Python, providing developers with essential tools to create both simple and complex applications. This article will guide you through the process of creating a basic web application using Flask.

Installing Flask

Before we begin creating a web application with Flask, you need to install Flask. To do this, run the following command:

pip install flask
Enter fullscreen mode Exit fullscreen mode

Our First Flask Application

Let's create a simple web application that returns "Hello, World!" when accessed at the root URL. Create a file called app.com and write the following code:

from flask import Flask

app = Flask(__name__)

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

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

Here, we import the Flask class from the flask module. Then, we create an instance of the Flask class and pass it the application's name, __name__. Next, we use the @app.route('/') decorator to bind the hello_world() function to the root URL ('/'). Inside the hello_world() function, we simply return the string 'Hello, World!'.

Finally, we run the application if the app.com file is run directly (rather than being imported into another file).

You can run the application by executing the command:

python app.com
Enter fullscreen mode Exit fullscreen mode

After running this command, you will see a message indicating that your application is running at http://localhost:5000.

Adding Templates

Now, let's add a template for the web page. Flask allows you to use the Jinja2 templating engine to create dynamic web pages. Create a file called index.html and write the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, Flask!</title>
</head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here, we have created a simple HTML file that will be used as a template. We added a title and an <h1> tag, in which we will display a message.

Now, we can modify our hello_world() function to use the template. Instead of returning a string, we will return a rendered template of index.html. To do this, we will need to use the render_template() function from the flask module and pass it the name of the template file and any variables that we want to use in the template. For example:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html', message='Hello, Flask!')

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

Now, when we access the root URL, we will see "Hello, Flask!" displayed in the browser instead of the string "Hello, World!".

Adding Static Files

Often, when creating web applications, we need to use static files such as images, stylesheets, and JavaScript files. Flask allows you to store static files in the static directory in the application's root directory.

Let's add a CSS file for our application. Create a file called style.css in the static/css directory and write the following code:

body {
    background-color: #EEE;
}

h1 {
    color: #369;
}
Enter fullscreen mode Exit fullscreen mode

Then, we will add a link to our CSS file in the index.html template:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, Flask!</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here, we added a link to our CSS file using the url_for() function, which generates a URL for the static file. The first argument of the function is the name of the view function (here, we use 'static'), and the second argument is the name of the file in the static/css directory.

Conclusion

Flask is a powerful and easy-to-use framework for creating web applications in Python. In this article, we explored the basics of Flask and created a simple web application using templates and static files. Flask provides many possibilities for creating various web applications, and we recommend reading the Flask documentation to get more detailed information and to use all its capabilities in your projects.

Top comments (0)