Python Forum
[Flask]Bootstrap node npm gulp bower
Thread Rating:
  • 2 Vote(s) - 2.5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Flask]Bootstrap node npm gulp bower
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 
λ python -m venv flask_boot

λ cd flask_boot

λ ls
Include/  Lib/  Scripts/  pyvenv.cfg

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

# Check that Python in virenv is used
λ which 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
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 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

(flask_boot) C:\div_flask\flask_boot
λ npm -v
Now we have npm this JavaScript's install tool same as Python pip 
npm is heavily used it has over 2 billion Shocked  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
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?
Quote: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:
Can use bower to download it:
(flask_boot) C:\div_flask\flask_boot  ([email protected])
λ bower install
from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

def hello():
    return render_template("index.html")

if __name__ == '__main__':
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.
<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 in browser
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 Cool
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 FlasknpmgulpbowerYeoman:
# Make virtual enviroment
[email protected] ~ $ virtualenv -p /usr/bin/python3.5 new_age
[email protected] ~ $ cd new_age
# Activate
[email protected] ~/new_age $ source bin/activate

# Check enviroment
(new_age) [email protected] ~/new_age $ which python
(new_age) [email protected] ~/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) [email protected] ~/new_age $ pip install flask

# nodeenv
(new_age) [email protected] ~/new_age $ pip install nodeenv
(new_age) [email protected] ~/new_age $ nodeenv -p

# Version
(new_age) [email protected] ~/new_age $ node -v
(new_age) [email protected] ~/new_age $ npm -v

# install web tool
(new_age) [email protected] ~/new_age $ npm install -g yo gulp-cli bower
(new_age) [email protected] ~/new_age $ npm install --save-dev gulp
(new_age) [email protected] ~/new_age $ npm init

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

Choosing an other template New Age:
Folder setup:
  -- index_flask.html
    \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.
(new_age) [email protected] ~/new_age $ bower install
In startbootstrap-new-age folder:
Run copy index_flask.html and all folders to static folder.
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
def hello():
    return render_template("index_flask.html")
if __name__ == '__main__':
Run it using Flask build in web-server:
python in browser
If work should look like Live Preview

Forum Jump:

User Panel Messages

Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020