0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

How to update flask-bootstrap4 CDN on your flask application

Last updated at Posted at 2020-01-28

Ay up mate! Long time no see. Already 4 years, since I made the 1st post. This is my 2nd post since 2016.
Now, I want to share how to modified flask-bootstrap4 after you installed on your flask application.
Because sometimes bootstrap.css/fontawesome.css/popper.js/jquery.js need an update.
This is what I've done.

First, flask-bootstrap4 need to be installed to your flask app. So, you will need to activate your virtual environment first to install flask-bootstrap4, and then run your flask application. I named my virtual environment as venv.
If you're on Windows use command prompt to install, but if you're on Linux/MacOS use terminal.

venv
pip install flask-bootstrap4

After you install go to

venv > Lib > site-packages > flask_bootstrap

Now, modify init.py

__init__.py
__version__ = '4.4.1'
BOOTSTRAP_VERSION_RE = re.compile(r'(\d+\.\d+\.\d+(\-[a-z]+)?)')
POPPER_VERSION = '1.16.0'
JQUERY_VERSION = '3.4.1'
FONTAWESOME_VERSION = '5.11.2'

... 

popper = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/popper.js/%s/' %
            POPPER_VERSION), local)

bootstrap = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/' %
            BOOTSTRAP_VERSION), local)

fontawesome = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/font-awesome/%s/' %
            FONTAWESOME_VERSION), local)

jquery = lwrap(
     WebCDN('//cdnjs.cloudflare.com/ajax/libs/jquery/%s/' %
            JQUERY_VERSION), local)

app.extensions['bootstrap'] = {
     'cdns': {
         'local': local,
         'static': static,
         'popper': popper,
         'bootstrap': bootstrap,
         'fontawesome': fontawesome,
         'jquery': jquery,
      },
}

Next step, we need to go to base.html. It's located in template > bootstrap

venv > Lib > site-packages > flask_bootstrap > templates > bootstrap

Let's update base.html

base.html
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
<link href="{{bootstrap_find_resource('css/all.css', cdn='fontawesome')}}" rel="stylesheet">

...

<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('umd/popper.js', cdn='popper')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>

Finally, run your flask app. Now all bootstrap.css/fontawesome.css/popper.js/jquery.js have been updated.

For more detail, you can see it on the official github of flask-bootstrap4:
https://github.com/JeffCarpenter/flask-bootstrap4

Well, that's all for today mate. Have a good day.
Happy coding and see you next time.

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?