Updating flask-bootstrap4 CDN on your flask application

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

<span>__version__</span> <span>=</span> <span>'4.4.1'</span>
<span>BOOTSTRAP_VERSION_RE</span> <span>=</span> <span>re</span><span>.</span><span>compile</span><span>(</span><span>r</span><span>'(\d+\.\d+\.\d+(\-[a-z]+)?)'</span><span>)</span>
<span>POPPER_VERSION</span> <span>=</span> <span>'1.16.0'</span>
<span>JQUERY_VERSION</span> <span>=</span> <span>'3.4.1'</span>
<span>FONTAWESOME_VERSION</span> <span>=</span> <span>'5.11.2'</span>
<span>...</span> 
<span>popper</span> <span>=</span> <span>lwrap</span><span>(</span>
    <span>WebCDN</span><span>(</span><span>'//cdnjs.cloudflare.com/ajax/libs/popper.js/%s/'</span> <span>%</span>
            <span>POPPER_VERSION</span><span>),</span> <span>local</span><span>)</span>
<span>bootstrap</span> <span>=</span> <span>lwrap</span><span>(</span>
    <span>WebCDN</span><span>(</span><span>'//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/'</span> <span>%</span>
            <span>BOOTSTRAP_VERSION</span><span>),</span> <span>local</span><span>)</span>
<span>fontawesome</span> <span>=</span> <span>lwrap</span><span>(</span>
    <span>WebCDN</span><span>(</span><span>'//cdnjs.cloudflare.com/ajax/libs/font-awesome/%s/'</span> <span>%</span>
            <span>FONTAWESOME_VERSION</span><span>),</span> <span>local</span><span>)</span>
<span>jquery</span> <span>=</span> <span>lwrap</span><span>(</span>
     <span>WebCDN</span><span>(</span><span>'//cdnjs.cloudflare.com/ajax/libs/jquery/%s/'</span> <span>%</span>
            <span>JQUERY_VERSION</span><span>),</span> <span>local</span><span>)</span>
<span>app</span><span>.</span><span>extensions</span><span>[</span><span>'bootstrap'</span><span>]</span> <span>=</span> <span>{</span>
     <span>'cdns'</span><span>:</span> <span>{</span>
         <span>'local'</span><span>:</span> <span>local</span><span>,</span>
         <span>'static'</span><span>:</span> <span>static</span><span>,</span>
         <span>'popper'</span><span>:</span> <span>popper</span><span>,</span>
         <span>'bootstrap'</span><span>:</span> <span>bootstrap</span><span>,</span>
         <span>'fontawesome'</span><span>:</span> <span>fontawesome</span><span>,</span>
         <span>'jquery'</span><span>:</span> <span>jquery</span><span>,</span>
      <span>},</span>
<span>}</span>
<span>__version__</span> <span>=</span> <span>'4.4.1'</span>
<span>BOOTSTRAP_VERSION_RE</span> <span>=</span> <span>re</span><span>.</span><span>compile</span><span>(</span><span>r</span><span>'(\d+\.\d+\.\d+(\-[a-z]+)?)'</span><span>)</span>
<span>POPPER_VERSION</span> <span>=</span> <span>'1.16.0'</span>
<span>JQUERY_VERSION</span> <span>=</span> <span>'3.4.1'</span>
<span>FONTAWESOME_VERSION</span> <span>=</span> <span>'5.11.2'</span>

<span>...</span> 

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

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

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

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

<span>app</span><span>.</span><span>extensions</span><span>[</span><span>'bootstrap'</span><span>]</span> <span>=</span> <span>{</span>
     <span>'cdns'</span><span>:</span> <span>{</span>
         <span>'local'</span><span>:</span> <span>local</span><span>,</span>
         <span>'static'</span><span>:</span> <span>static</span><span>,</span>
         <span>'popper'</span><span>:</span> <span>popper</span><span>,</span>
         <span>'bootstrap'</span><span>:</span> <span>bootstrap</span><span>,</span>
         <span>'fontawesome'</span><span>:</span> <span>fontawesome</span><span>,</span>
         <span>'jquery'</span><span>:</span> <span>jquery</span><span>,</span>
      <span>},</span>
<span>}</span>
__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,
      },
}

Enter fullscreen mode Exit fullscreen mode

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

<span><!-- Bootstrap --></span>
<span><link</span> <span>href=</span><span>"{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}"</span> <span>rel=</span><span>"stylesheet"</span><span>></span>
<span><link</span> <span>href=</span><span>"{{bootstrap_find_resource('css/all.css', cdn='fontawesome')}}"</span> <span>rel=</span><span>"stylesheet"</span><span>></span>
...
<span><script </span><span>src=</span><span>"{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"</span><span>></script></span>
<span><script </span><span>src=</span><span>"{{bootstrap_find_resource('umd/popper.js', cdn='popper')}}"</span><span>></script></span>
<span><script </span><span>src=</span><span>"{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"</span><span>></script></span>
<span><!-- Bootstrap --></span>
<span><link</span> <span>href=</span><span>"{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}"</span> <span>rel=</span><span>"stylesheet"</span><span>></span>
<span><link</span> <span>href=</span><span>"{{bootstrap_find_resource('css/all.css', cdn='fontawesome')}}"</span> <span>rel=</span><span>"stylesheet"</span><span>></span>

...

<span><script </span><span>src=</span><span>"{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"</span><span>></script></span>
<span><script </span><span>src=</span><span>"{{bootstrap_find_resource('umd/popper.js', cdn='popper')}}"</span><span>></script></span>
<span><script </span><span>src=</span><span>"{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"</span><span>></script></span>
<!-- 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>

Enter fullscreen mode Exit fullscreen mode

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:
github.com/JeffCarpenter/flask-bootstrap4

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

原文链接：Updating flask-bootstrap4 CDN on your flask application