Open In App

How to serve static files in Flask

Last Updated : 19 Mar, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In Flask, static files refer to files such as CSS, JavaScript, images, videos, and audio files that do not change dynamically. Flask provides a built-in way to serve these static files using the /static directory.

This guide will show how to serve different types of static files in a Flask web application efficiently.

File Structure 

File-Structure
File Structure

HTML File

To serve HTML files in Flask, just create a templates folder in the project root and add your HTML files (e.g., templates/index.html). Using Jinja ({{ message }}), you can display text stored in a variable.

HTML 
<html>
 <head>
   <title>Flask Static Demo</title>
 </head>
 <body>
   <h1>{{message}}</h1>
 </body>
</html>

main.py

In main.py, we use Flask's render_template() function to render the HTML file when the app runs. The final code looks like this:

Python 
from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route("/")
def hello():
    message = "Hello, World"
    return render_template('index.html', 
                           message=message)

# run the application
if __name__ == "__main__":
    app.run(debug=True)

Output:

The Flask is up and running on localhost port http://127.0.0.1:5000/

Localhost
Localhost

Serve CSS file in Flask

Now serving a CSS file is the same as an HTML file but instead of /templates folder, we create a static folder in the root directory and add all CSS files to it, For simplicity, we have used a very simple CSS file.

CSS 
h1{
    color: red;
    font-size: 36px;
}

Now, let us link it with the HTML template file using the link tag referring to the CSS file in the static folder.

HTML 
<html>
  <head>
    <title>Flask Static Demo</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <h1>{{message}}</h1>
  </body>
</html>

Output:

Localhost
localhost:5000

Serve JavaScript file in Flask

To serve Javascript it is the same as a CSS file create a javascript file in the static folder.

JavaScript 
document.write("This is a Javascript static file")

Now link it with the HTML and run the Flask app.

HTML 
<html>
  <head>
    <title>Flask Static Demo</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <h1>{{message}}</h1>

    <script src="/static/serve.js" charset="utf-8"></script>
  </body>
</html>

Output:

Javascript-static-file
Javascript static file

Serve Media files in Flask (Image, Video, Audio)

Flask can also serve media files like images, videos, audio, text files, and PDFs using the static folder. Just like CSS and JavaScript, media files are stored in static/ and linked to HTML files.

Steps to Serve Media Files:

  • Place all media files inside the static/ folder.
  • Link them in HTML using the /static/ path. Example: <img src="{{ url_for('static', filename='images/sample.jpg') }}" alt="Sample Image">
  • In main.py, create routes for any static files you need to render.
  • Run the Flask app, and media files will be served along with the web pages.

Images

Create an image.html file in the templates folder and add the following code to the main.py and image.html respectively.

Python 
# Images
@app.route("/image")
def serve_image():
    message = "Image Route"
    return render_template('image.html', message=message)

templates/images.html

HTML 
<html>
  <head>
    <title>Flask Static Demo</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <h1>{{message}}</h1>

    <img src="/static/cat.jpg" alt="Cat image" width="20%" height="auto" />

    <script src="/static/serve.js" charset="utf-8"></script>
  </body>
</html>

Output:

How to serve static files in Flask
Image Route

Video Files

To serve a video file, create a video.html file in your templates folder and add the following code to your main.py and video.html files.

Python 
# video
@app.route("/video")
def serve_video():
    message = "Video Route"
    return render_template('video.html', message=message)

templates/video.html

As you see the mp4 video file is been served by Flask over localhost.

HTML 
<html>
  <head>
    <title>Flask Static Demo</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <h1>{{message}}</h1>

    <video width="320" height="240" controls>
      <source src="/static/ocean_video.mp4" type="video/mp4" />
    </video>

    <script src="/static/serve.js" charset="utf-8"></script>
  </body>
</html>

Output:

How to serve static files in Flask\
Video Route

Audio Files

Respectively an audio file can be served by creating an audio.html template file and adding the following code to the main.py.

Python 
# audio
@app.route("/audio")
def serve_audio():
    message = "Audio Route"
    return render_template('audio.html', message=message)

templates/audio.html

HTML 
<html>
  <head>
    <title>Flask Static Demo</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <h1>{{message}}</h1>

    <audio controls>
      <source src="/static/audio.mp3" />
    </audio>

    <script src="/static/serve.js" charset="utf-8"></script>
  </body>
</html>

Output:

audio-route
Audio Route

Complete Flask Code

For simplicity, we have created a simple Flask application for a better understanding of how to serve static files in Flask.

Python 
from flask import Flask
from flask import render_template

# creates a Flask application
app = Flask(__name__)


@app.route("/")
def hello():
    message = "Hello, World"
    return render_template('index.html', message=message)


@app.route("/video")
def serve_video():
    message = "Video Route"
    return render_template('video.html', message=message)


@app.route("/audio")
def serve_audio():
    message = "Audio Route"
    return render_template('audio.html', message=message)


@app.route("/image")
def serve_image():
    message = "Image Route"
    return render_template('image.html', message=message)


# run the application
if __name__ == "__main__":
    app.run(debug=True)

Let's test the Flask app by running it, to run the app just run the python main.py which will serve output as shown above:

main-py
main.py

Next Article
Uploading and Downloading Files in Flask

H
harivanshthakur8
Improve
Article Tags :
Practice Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox