Hello guest, if you read this it means you are not registered. Click here to register in a few simple steps, you will enjoy all features of our Forum.
Bottom Page

Thread Rating:
  • 0 Vote(s) - 0 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 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

(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  (flask_boot@1.0.0)
λ 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  (flask_boot@1.0.0)
λ mkdir flask_freelance

(flask_boot) C:\div_flask\flask_boot  (flask_boot@1.0.0)
λ 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  (flask_boot@1.0.0)
λ bower install https://github.com/BlackrockDigital/startbootstrap-freelancer.git
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 app.py 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
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
(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
(new_age) mint@mint ~/new_age $ npm -v

# 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

Choosing an other template New Age:
Folder setup:
  -- app.py
  -- 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) 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__)
def hello():
    return render_template("index_flask.html")
if __name__ == '__main__':
Run it using Flask build in web-server:
python app.py in browser
If work should look like Live Preview

Top Page

Possibly Related Threads...
Thread Author Replies Views Last Post
  [Flask]Weather app snippsat 0 329 Jan-25-2017, 12:24 AM
Last Post: snippsat
  [Flask]Starting web-development part-1 snippsat 1 922 Sep-30-2016, 03:34 PM
Last Post: Larz60+
  [Flask]Ajax in Flask snippsat 2 649 Sep-29-2016, 03:32 PM
Last Post: snippsat

Forum Jump:

Users browsing this thread: 1 Guest(s)