Vitejs + Flask: I have trouble serving a bundled Vitejs app with Flask

I am using Flask to try to serve a bundled Vitejs app.

This is my

from flask import Flask, render_template, send_from_directory
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.static_folder = './dist/'
app.template_folder = './dist/'

# load configuration

def index():
    return app.send_static_file('index.html')

if __name__ == '__main__':

This is my DEBUG = True

This is my project structure:

└── root/
    └── dist/
        ├── index.html
        ├── assets/
        │   ├── index-8ee458a9.js
        │   └── index-faff41b9.css
        ├── images/
        ├── JSON/
        └── markdown/

This is all I get on my client when running flask run:

<html id="html" lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" href="/vite.svg">

    <link rel="preconnect" href="">
    <link rel="preconnect" href="" crossorigin="">
    <link href=";family=Comfortaa&amp;display=swap" rel="stylesheet">

    <title>TAB TITLE</title>
    <script type="module" crossorigin="" src="/assets/index-8ee458a9.js"></script>
    <link rel="stylesheet" href="/assets/index-faff41b9.css">
    <div id="root">


As you can see, I'm missing the entire website.

This is the client console log: enter image description here

And the network's tab: enter image description here

The blocked GET request seems to be sending HTML when JS is expected, but I cant tell why because the path leads to the JS file inside the assets/ folder.

This is the flask run output: enter image description here

Any ideas?

Thank you!


  • I'm not entirely sure but I think it is not finding your assets. By default, flask is looking in a template and in a static folder. I had a similar issue and could resolve it with this line:

    app = Flask(__name__, template_folder=os.path.join(os.path.dirname(__file__),  'dist'), static_folder=os.path.join(os.path.dirname(__file__), 'dist', 'assets'), static_url_path='/assets')

    See how the static_folder points to /dist/assets?

    I think that's what you're missing since you're pointing the static folder to /dist as well atm:

    app.static_folder = './dist/'
    app.template_folder = './dist/'

    This is my first answer ever so I hope it helps haha!