Geek Answers Handbook

Configure checkbox to load js and css boot files correctly

How can you use the url_for directive in Flask to set it up correctly so that the html page using Bootstrap and RGraph works?

Say my html page looks like this (partial snippet): -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link href="scripts/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <title>HP Labs: Single Pane Of Glass (Alpha)</title> <script src="scripts/RGraph/libraries/RGraph.common.core.js" ></script> <script src="scripts/RGraph/libraries/RGraph.line.js" ></script> <script src="scripts/RGraph/libraries/RGraph.common.effects.js" ></script> <script src="scripts/RGraph/libraries/RGraph.line.js" ></script> ...... </html>

Here is what I did / want to do: -

  • Created a template directory next to my Flask module and put this html file into it.

  • Created a "static" directory next to my Flask module, but I'm not sure where and how many operators like "url_for" to use and where they should go. Thus, the scripts directory is currently a subdirectory in the templates directory (I know this is not true).

  • I would like to be able to correctly reference all Bootstrap and RGraph js and css (right now, seeing a lot of 404).

Can someone guide me to properly configure Flask (by running the dev server) to do this? Now js and css are not working.

Thanks!

+7
python flask
source share
2 answers

Put the scripts directory in the static subdirectory, and then use:

 <link href="{{ url_for('static', filename='scripts/bootstrap/dist/css/bootstrap.css') }}" rel="stylesheet">

The template is here:

 {{ url_for('static', filename='path/inside/the/static/directory') }}

which will be replaced with the correct URL for static resources, even if you included all these files on another hosting (for example, CDN).

+13
source share

I'm not sure if this is useful, but I saw this while studying on a flask:

 from flask.ext.bootstrap import Bootstrap # ... bootstrap = Bootstrap(app)

you can pip install flask-bootstrap and this should help

then on your template:

 {% extends "bootstrap/base.html" %}
+4
source share

More articles:


All Articles