Building a Simple Website with Flask: A Step-by-Step Example
Flask, a popular Python web framework, is renowned for its simplicity and flexibility. It's an excellent choice for both beginners and experienced developers looking to create small to medium-sized web applications. In this guide, we'll create a simple example website using Flask, covering installation, setup, and essential features.
Setting Up Your Flask Environment
Before we dive into creating our example website, ensure you have Python (3.6 or later) and pip installed on your system. Then, install Flask using pip:
pip install flaskCreating a New Flask Project
Navigate to the directory where you want to create your project and run the following command to create a new Flask application:
flask new my_projectReplace 'my_project' with the name you want for your project. This command will create a new folder with the basic structure of a Flask application.
Understanding the Project Structure
Flask projects follow a simple structure. Here's a breakdown of the generated folders and files:
- my_project/: The main project folder.
- my_project/__init__.py: The main application file where you'll configure your Flask app.
- my_project/templates/: Folder for HTML templates.
- my_project/static/: Folder for static files like CSS and JavaScript.
- my_project/config.py: Configuration file for your application.
Running the Flask Development Server
To run your Flask application, navigate to the project directory and execute the following command:
export FLASK_APP=my_project
flask runYour application should now be running on http://127.0.0.1:5000/.
Creating Routes and Views
In Flask, routes map URLs to Python functions. Let's create a simple route in my_project/__init__.py:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
if __name__ == '__main__':
app.run(debug=True)We've created a route for the home page that renders an HTML template named 'home.html'. Create this template in the my_project/templates/ folder:
<!DOCTYPE html>
<html>
<head>
<title>My Flask Website</title>
</head>
<body>
<h1>Welcome to my Flask website!</h1>
</body>
</html>Now, when you navigate to http://127.0.0.1:5000/, you should see your new website with the heading "Welcome to my Flask website!".
Adding More Pages and Navigation
Let's add an 'About' page and update our navigation. First, create a new template named 'about.html' in the my_project/templates/ folder:
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body>
<h1>About this website</h1>
<p>This is a simple website built with Flask.</p>
</body>
</html>Next, update the 'home.html' template to include a navigation bar:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<h1>Welcome to my Flask website!</h1>
</body>
</html>Finally, add a new route in my_project/__init__.py for the 'About' page:
@app.route('/about')
def about():
return render_template('about.html')Now, you should have a simple website with a home page and an 'About' page, accessible via the navigation bar.
Conclusion
In this guide, we've created a simple example website using Flask, covering essential features like setting up the development environment, creating routes and views, and adding multiple pages with navigation. Flask's simplicity and flexibility make it an excellent choice for both beginners and experienced developers looking to build web applications quickly and efficiently.
