[Flask]Bootstrap node npm gulp bower

[snippsat]

In this tutorial gone run a Bootstrap template in Flask,just pick one on first page Freelancer.
source code this is a HTML template,but we see stuff like gulpfile.js,package.json,less ect.
This is used in build process and we do not need to run it,but gone talk about usage.

Part 1.

---

This gone be about virtual environment and also how get to JavaScript messy world to run in virtual environment.
I use Python 3.6 Win-10 and shell(cmder) Editor(Atom).
Use virtual environment that build into 36.

# Make virtual environment 
C:\div_flask
λ python -m venv flask_boot

C:\div_flask
λ cd flask_boot

C:\div_flask\flask_boot
λ ls
Include/  Lib/  Scripts/  pyvenv.cfg

# Activate
C:\div_flask\flask_boot
λ C:\div_flask\flask_boot\Scripts\activate.bat
(flask_boot) C:\div_flask\flask_boot

# Check that Python in virenv is used
λ which python
/c/div_flask/flask_boot/Scripts/python

# Check pip
(flask_boot) C:\div_flask\flask_boot
λ pip -V
pip 9.0.1 from c:\div_flask\flask_boot\lib\site-packages (python 3.6)

# install Flask
(flask_boot) C:\div_flask\flask_boot
λ pip install flask

(flask_boot) C:\div_flask\flask_boot
λ pip freeze
click==6.7
Flask==0.12.1
itsdangerous==0.24
Jinja2==2.9.6
MarkupSafe==1.0
Werkzeug==0.12.1

Now gone add nodeenv and integrate(nodeenv -p) into virtual environment.

(flask_boot) C:\div_flask\flask_boot
λ pip install nodeenv
Collecting nodeenv
  Using cached nodeenv-1.1.2.tar.gz
Installing collected packages: nodeenv
  Running setup.py install for nodeenv ... done
Successfully installed nodeenv-1.1.2

(flask_boot) C:\div_flask\flask_boot
λ nodeenv -p
 * Install prebuilt node (7.8.0) ..... done.
 * Appending data to c:\div_flask\flask_boot\Scripts\activate.bat
 * Appending data to c:\div_flask\flask_boot\Scripts\deactivate.bat
 * Appending data to c:\div_flask\flask_boot\Scripts\Activate.ps1
symbolic link created for c:\div_flask\flask_boot\Scripts\nodejs.exe <<===>> node.exe
 * Install npm.js (latest) ...
(flask_boot) C:\div_flask\flask_boot
λ node -v
v7.8.0

(flask_boot) C:\div_flask\flask_boot
λ npm -v
4.5.0

Now we have npm this JavaScript's install tool same as Python pip 
npm is heavily used it has over 2 billion  download's every week.
Now that we have npm gone install yo, gulp and bower.

(flask_boot) C:\div_flask\flask_boot
λ npm install -g yo gulp-cli bower
λ npm install --save-dev gulp
λ npm init

λ gulp -v
[23:32:49] CLI version 1.2.2
[23:32:49] Local version 3.9.1

(flask_boot) C:\div_flask\flask_boot  ([email protected])
λ bower -v
1.8.0

What's gulp?

• Spinning up a web server
  
• Reloading the browser automatically whenever a file is saved
  
• Using preprocessors like Sass or LESS
  
• Optimizing assets like CSS, JavaScript, and images
  

What's bower?

Web sites are made of lots of things — frameworks, libraries, assets, and utilities.
Bower manages all these things for you.

---

Part 2.
Now gone run Freelancer.
All that it's needed is Flask which installed.
Make folder in virtual environment.

(flask_boot) C:\div_flask\flask_boot  ([email protected])
λ mkdir flask_freelance

(flask_boot) C:\div_flask\flask_boot  ([email protected])
λ cd flask_freelance
(flask_boot) C:\div_flask\flask_boot\flask_freelance

Folder structure:

flask_freelance\
 app.py
 templates\
   index.html
 static\

Can use bower to download it:

(flask_boot) C:\div_flask\flask_boot  ([email protected])
λ bower install https://github.com/BlackrockDigital/startbootstrap-freelancer.git

app.py:

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

@app.route('/')
def hello():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

All folders from startbootstrap-freelancer folder copy into static folder.
index.html into templates folder.

Now open index.html.
Link all css,js and images to to static folder.
Eg:

<link rel=stylesheet type=text/css href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" />
<!--<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">-->

<script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
<!--<script src="vendor/jquery/jquery.min.js"></script>-->

# images
<img src="static/img/portfolio/cake.png" class="img-responsive" alt="">

url_for is the advisable method,can also add static to all.
url_for generates url's to routes defined in your application.
To run python app.py in browser http://127.0.0.1:5000.
So now it should look like live preview.

---

Conclusion web-development can be messy  place,
virtual environment is really great for doing all this and not touch OS system.
Something goes wrong just delete the virtual environment folder and start over

[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