reactjsflaskbackendvitevite-reactjs

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 app.py:

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
app.config.from_pyfile('config.py')



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



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

This is my config.py: DEBUG = True

This is my project structure:

.
└── root/
    ├── app.py
    ├── config.py
    └── 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="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Carattere&amp;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">
  </head>
  <body>
    sdsdsdsdsdsdsdsdsdsdsd
    <div id="root">
    </div>
  

</body></html>

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!

Solution

  • 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!