Search code examples
pythonhtmlcssflaskbootstrap-studio

Flask | How to connect missing (404) assets folder to html exported from bootstrap studio

I used bootstrap studio to create an HTML page that I need to use for flask.

The HTML page was running fine with all assets working from asset directory.

I set up the flask app.py, moved the /asset dir with index.html to /templates and render_template in the flask. HTML is loading but getting missing assets.

I read a blog and copied the asset folder to the /static directory but not working.

Here is app.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def index():
    games = ['Assassin', 'Call of Duty', 'Cyberpunk', "GTA V"]
    return render_template("home.html", games=games)


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

Here is the output

* Detected change in 'c:\\Users\\Haseeb\\OneDrive\\Documents\\MEGAsync\\Freelancing\\Cars Classified market crawler - Ahmed\\web app\\app.py', reloading
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 238-233-787
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/fonts/font-awesome.min.css HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/fonts/ionicons.min.css HTTP/1.1" 404 -    
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/css/styles.min.css HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/img/cargurus_5744444c4a374742344641313533373039547565204a756c2032372031313a32373a30312032303231_4.jpg HTTP/1.1" 404 -   
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/img/autotrader_4a54444b42323055383833343538383832546875204a756c2031352031353a31353a33332032303231_4.jpg HTTP/1.1" 404 - 
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/img/autotrader_3554445a41323343323653343033353233546875204a756c2031352031353a31383a30322032303231_22.jpg HTTP/1.1" 404 -
127.0.0.1 - - [12/Aug/2021 00:26:38] "GET /assets/img/logo%20white.png HTTP/1.1" 404 -

This is how my tree is

Volume serial number is 4C25-00D7
C:.
│   app.py
│   website design.bsdesign
│
├───static
│   └───assets
│       ├───bootstrap
│       │   ├───css
│       │   │       bootstrap.min.css
│       │   │
│       │   └───js
│       │           bootstrap.min.js
│       │
│       ├───css
│       │       styles.min.css
│       │
│       ├───fonts
│       │       font-awesome.min.css
│       │       fontawesome-webfont.eot
│       │       fontawesome-webfont.svg
│       │       fontawesome-webfont.ttf
│       │       fontawesome-webfont.woff
│       │       fontawesome-webfont.woff2
│       │       FontAwesome.otf
│       │       ionicons.eot
│       │       ionicons.min.css
│       │       ionicons.svg
│       │       ionicons.ttf
│       │       ionicons.woff
│       │
│       └───img
│               adam-stefanca-hdMSxGizchk-unsplash.jpg
│               autotrader_3554445a41323343323653343033353233546875204a756c2031352031353a31383a30322032303231_22.jpg
│               autotrader_4a54444b42323055383833343538383832546875204a756c2031352031353a31353a33332032303231_4.jpg
│               cargurus_5744444c4a374742344641313533373039547565204a756c2032372031313a32373a30312032303231_4.jpg
│               logo white.png
│
└───templates
    │   home.html
    │   index.html
    │   login.html
    │
    └───assets
        ├───bootstrap
        │   ├───css
        │   │       bootstrap.min.css
        │   │
        │   └───js
        │           bootstrap.min.js
        │
        ├───css
        │       styles.min.css
        │
        ├───fonts
        │       font-awesome.min.css
        │       fontawesome-webfont.eot
        │       fontawesome-webfont.svg
        │       fontawesome-webfont.ttf
        │       fontawesome-webfont.woff
        │       fontawesome-webfont.woff2
        │       FontAwesome.otf
        │       ionicons.eot
        │       ionicons.min.css
        │       ionicons.svg
        │       ionicons.ttf
        │       ionicons.woff
        │
        └───img
                adam-stefanca-hdMSxGizchk-unsplash.jpg
                autotrader_3554445a41323343323653343033353233546875204a756c2031352031353a31383a30322032303231_22.jpg
                autotrader_4a54444b42323055383833343538383832546875204a756c2031352031353a31353a33332032303231_4.jpg
                cargurus_5744444c4a374742344641313533373039547565204a756c2032372031313a32373a30312032303231_4.jpg
                logo white.png
Solution

  • Your page points to resources under /assets, but Flask serves them under /static.

    You can solve this:

    • Either by changing your HTML to point at /static instead of /assets -- then a request for http://localhost/static/style.css will be served from C:/static/style.css;
    • Or by setting up Flask to serve the files under a different path -- then a request for http://localhost/assets/style.css will be served from C:/static/style.css:
    app = Flask(__name__, static_url_path='/assets')

    You can check out all the parameters you can set on initialization in the documentation.

    Whichever you choose to use, you will need to move your files around -- for example, C:/templates/assets is not used at all, so you probably want to remove it, and unless you want to access /[static|assets]/assets/style.css you want to move C:/static/assets/* to C:/static/.

    Also keep in mind that if you intend to deploy your project on a production system, you should consider configuring your web server to serve the static files for you, instead of keeping Flask itself doing this. Web servers are very good at serving static files, and they will apply things like compression, caching and ETag headers for you; it would be wise to use their purpose-built code where it works best.