[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