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
#1
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 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
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?
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:
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 Cool
Reply
#2
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
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.
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
Reply


Forum Jump:

User Panel Messages

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