Flask Web Development With Python Tutorial

In this tutorial, we’ll be covering how to serve HTML, CSS, and JavaScript files from a Flask application. By the end of this tutorial, you’ll have a solid understanding of how to create a Flask website that uses HTML, CSS, and JavaScript to create an interactive and engaging user experience. Let’s get started with this Flask web development with Python tutorial!

Step 1: Create a Flask Application

The first step in adding HTML, CSS, and JavaScript files to a Flask website is to create a Flask application. This can be done by creating a new directory for your project and then creating a new file called app.py within that directory.

from flask import Flask

app = Flask(__name__)

if __name__ == '__main__':
    app.run()

In the code above, we’ve imported the Flask module and created a new Flask application. The __name__ variable is used to determine the name of the current module, and it is passed as an argument to the Flask constructor when creating the application.

Step 2: Create Template and Static Folders

Next, we’ll create two new folders within our project directory: a template folder and a static folder. The template folder will be used to store our HTML files, while the static folder will be used to store our CSS and JavaScript files.

Step 3: Add a Route to Serve HTML Files

With our template folder created, we can now add a route to our Flask application that will serve our HTML files. To do this, we’ll use the render_template method, which is part of Flask’s flask module. This method takes the name of the HTML file that you want to serve as an argument and returns it to the client.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

In the code above, we’ve added a new route to our Flask application that will serve the index.html file when the client visits the root URL of our website. The render_template method takes the name of the HTML file as an argument and returns it to the client.

Step 4: Add CSS and JavaScript Files to Your Static Folder

With our HTML files served by our Flask application, we can now add our CSS and JavaScript files to our static folder. To do this, simply create a new folder within the static folder for each type of file (e.g., css for CSS files, js for JavaScript files) and add your files to these folders.

Step 5: Link to Your CSS and JavaScript Files in Your HTML Files

With your Images, CSS, and JavaScript files stored in your static folder, the final step is to link to these files in your HTML files. To do this, the href and src attributes for all files must use the url_for function to get the url for the static folder and the filename.

<head>
    <link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='/images/favicon.png') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}" />
</head>

<body>
    ...
    <img src="{{ url_for('static', filename='/images/arrow-up.svg') }}" alt="Back to Top" class="back-to-top__image"/>
    <script src="{{ url_for('static', filename='index.js') }}"></script>
</body>

Step 6: Run Your Flask Application

With our Flask application and route set up, we’re now ready to run our website and start serving HTML files. To do this, simply run the following command in your terminal or command prompt:

flask run

And that’s it! Your Flask website is now serving HTML files and you’re ready to start building your web application. Whether you’re building a simple portfolio website or a complex web application, Flask makes it easy to get started and get your ideas off the ground.

You can access my code for this website on GitHub.

Adding HTML files to a Flask website is a straightforward process that can be done in just a few steps. By creating a Flask application, creating a template folder to store your HTML files, adding a route to serve your HTML files, and finally running your Flask application, you’ll be well on your way to creating a dynamic and interactive web experience for your users.

Learn More Tips On Flask Web Development With Python In My Tech Career Newsletter!

Get Valuable Learning Resources Delivered To Your Inbox Every Wednesday!

You can learn more about Flask web development with Python and career tips for Junior Developers, Senior Developers, Lead Developers, Project Managers, and Tech Leadership in my Tech Career Newsletter. This newsletter will give you insight into multiple stages of your career so that you can form your career plan, overcome learning blockers, and stay competitive in today’s crowded job market. It includes featured content from authors and influencers in my network to help you navigate your career and learn new skills. Use the form below to subscribe and set yourself up for career success!