[Flask]Bootstrap node npm gulp bower

[snippsat]

Make this web based virtual environment on Linux and run a BootStrap template in Flask.
Using Linux Mint 18.1 Serena,with default Python 3.5.

OS install:

sudo apt-get install python3-pip
sudo pip3 install virtualenv

Virtual environment with Flask, npm, gulp, bower, Yeoman:

# Make virtual enviroment
mint@mint ~ $ virtualenv -p /usr/bin/python3.5 new_age
mint@mint ~ $ cd new_age
# Activate
mint@mint ~/new_age $ source bin/activate

# Check enviroment
(new_age) mint@mint ~/new_age $ which python
/home/mint/new_age/bin/python
(new_age) mint@mint ~/new_age $ pip -V
pip 9.0.1 from /home/mint/new_age/lib/python3.5/site-packages (python 3.5)

# Install Flask
(new_age) mint@mint ~/new_age $ pip install flask

# nodeenv
(new_age) mint@mint ~/new_age $ pip install nodeenv
(new_age) mint@mint ~/new_age $ nodeenv -p

# Version
(new_age) mint@mint ~/new_age $ node -v
v7.8.0
(new_age) mint@mint ~/new_age $ npm -v
4.2.0

# install web tool
(new_age) mint@mint ~/new_age $ npm install -g yo gulp-cli bower
(new_age) mint@mint ~/new_age $ npm install --save-dev gulp
(new_age) mint@mint ~/new_age $ npm init

# Versions
(new_age) mint@mint ~/new_age $ gulp -v
[20:12:37] CLI version 1.2.2
[20:12:37] Local version 3.9.1
(new_age) mint@mint ~/new_age $ bower -v
1.8.0

---

Choosing an other template New Age:
Folder setup:

newage\
  -- app.py
  tempaltes\
  -- index_flask.html
  static\
    \all folder from bower download

I made script to change index.html to index_flask.html
It link all CSS,JS and images to flask static folder.

index change Hide-Show

# --| Run in folder with index.html |--
# index_changer.py
import re

with open('index.html', encoding='utf-8') as f:
    _html = f.read()

_css = re.sub(r"href=\"(css.*?)", r'href="static/\1', _html)
_img = re.sub(r"src=\"(img.*?)", r'src="static/\1', _css)
img_href = re.sub(r"href=\"(img|lib.*?)", r'href="static/\1', _img)
index_flask = re.sub(r"src=\"(js|lib.*?)", r'src="static/\1', img_href)

with open('index_flask.html', 'w', encoding='utf-8') as f_out:
    f_out.write(index_flask)

# --| Test |--
"""
import re
import pytest

def test_css():
    html = '''\
    <link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
    <link rel="stylesheet" href="css/bootstrap-theme.css">'''

    html_flask = '''\
    <link rel="stylesheet" type="text/css" href="static/css/isotope.css" media="screen" />
    <link rel="stylesheet" href="static/css/bootstrap-theme.css">'''

    _css = re.sub(r"href=\"(css.*?)", r'href="static/\1', html)
    assert _css == html_flask

def test_img():
    html = '''\
    <img src="img/1.jpg" class="img-responsive" alt="">
    <li><img alt="" class="img-responsive" src="img/9.jpg" width="100%" height="350"/></li>'''

    html_flask = '''\
    <img src="static/img/1.jpg" class="img-responsive" alt="">
    <li><img alt="" class="img-responsive" src="static/img/9.jpg" width="100%" height="350"/></li>'''

    _img = re.sub(r"src=\"(img.*?)", r'src="static/\1', html)
    assert _img == html_flask

def test_img_href():
    html = '''\
    <a href="lib/portfolio/1.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
    <img href="img/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">'''

    html_flask = '''\
    <a href="static/lib/portfolio/1.jpg" class="fancybox"><i class="fa fa-external-link fa-2x"></i></a>
    <img href="static/img/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">'''

    img_href = re.sub(r"href=\"(img|lib.*?)", r'href="static/\1', html)
    assert img_href == html_flask

def test_js():
    html = '''\
    <script src="lib/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    <script src="js/jquery.localscroll-1.2.7-min.js"></script>'''

    html_flask = '''\
    <script src="static/lib/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    <script src="static/js/jquery.localscroll-1.2.7-min.js"></script>'''

    js = re.sub(r"src=\"(js|lib.*?)", r'src="static/\1', html)
    assert js == html_flask
"""

Download:

(new_age) mint@mint ~/new_age $ bower install https://github.com/BlackrockDigital/startbootstrap-new-age.git

In startbootstrap-new-age folder:
Run index_changer.py copy index_flask.html and all folders to static folder.

# app.py
from flask import Flask, render_template, jsonify, request
 
app = Flask(__name__)
 
@app.route('/')
def hello():
    return render_template("index_flask.html")
 
if __name__ == '__main__':
    app.run(debug=True)

Run it using Flask build in web-server:
python app.py in browser 127.0.0.1:5000
If work should look like Live Preview