Updating flask-bootstrap4 CDN on your flask application

#flask #python #wtforms #bootstrap4

Ay up mate! I want to share how to I 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.

pip install flask-bootstrap4

After you install, go to flask_bootstrap folder in:

venv > Lib > site-packages > flask_bootstrap

Now, modify 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 inside flask_bootstrap folder

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

Let's update 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>