Boilerplate Jinja

Search…
Boilerplate Jinja
Template boilerplate code used by AppSeed to generate simple starters coded in Flask.
Jinja is basically an engine used to generate HTML or XML returned to the user via an HTTP response. For those who have not been exposed to a templating language before, such languages essentially contain variables as well as some programming logic, which when evaluated (or rendered into HTML) are replaced with actual values. 
Features:
UI Ready: the starter contains a production-ready design
Render Engine: Flask / Jinja2​
Deployment scripts: Docker, Gunicorn/Nginx, HEROKU
Links
​Jinja Boilerplate Code - Source code (published on Github)
​Jinja Boilerplate Code - LIVE demo
Sample Jinja Templates provided by AppSeed 
​Support (Email and LIVE on Discord) for registered AppSeed users.
​
Jinja - Official Logo.
Environment
To use the stater, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full list with dependencies and tools required to build the app:
​Python3 - the programming language used to code the app
​GIT - used to clone the source code from the Github repository
Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment. 
​
Build the Template
To built and start the app locally, follow the steps:
Get the source code
Download the ZIP from Github Repository
Using GIT tool in the terminal to clone the source code
Change the current directory to source code directory
1
$ git clone https://github.com/app-generator/boilerplate-code-jinja.git
2
$ cd boilerplate-code-jinja
3
$
4
$ # Virtualenv modules installation (Unix based systems)
5
$ virtualenv env
6
$ source env/bin/activate
7
$
8
$ # Virtualenv modules installation (Windows based systems)
9
$ # virtualenv env
10
$ # .\env\Scripts\activate
11
$
12
$ # Install requirements
13
$ pip3 install -r requirements.txt
14
$
15
$ # Set the FLASK_APP environment variable
16
$ (Unix/Mac) export FLASK_APP=run.py
17
$ (Windows) set FLASK_APP=run.py
18
$ (Powershell) $env:FLASK_APP = ".\run.py"
19
$
20
$ # Set up the DEBUG environment
21
$ # (Unix/Mac) export FLASK_ENV=development
22
$ # (Windows) set FLASK_ENV=development
23
$ # (Powershell) $env:FLASK_ENV = "development"
24
$
25
$ # Run the Jinja Template
26
$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
27
$ # --port=5000    - specify the app port (default 5000)  
28
$ flask run --host=0.0.0.0 --port=5000
29
$
30
$ # Access the UI in browser: http://127.0.0.1:5000/
Copied!
​
Codebase Structure
The project has a simple structure, represented as below:
1
< PROJECT ROOT >
2
   |
3
   |-- app/__init__.py
4
   |-- app/
5
   |    |-- static/
6
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
7
   |    |
8
   |    |-- templates/
9
   |    |    |
10
   |    |    |-- includes/                 # Page chunks, components
11
   |    |    |    |
12
   |    |    |    |-- navigation.html      # Top bar
13
   |    |    |    |-- sidebar.html         # Left sidebar
14
   |    |    |    |-- scripts.html         # JS scripts common to all pages
15
   |    |    |    |-- footer.html          # The common footer
16
   |    |    |
17
   |    |    |-- layouts/                  # App Layouts (the master pages)
18
   |    |    |    |
19
   |    |    |    |-- base.html            # Used by common pages like index, UI
20
   |    |    |    |-- base-fullscreen.html # Used by auth pages (login, register)
21
   |    |    |
22
   |    |  index.html                      # The default page
23
   |    |  login.html                      # Auth Login Page
24
   |    |  register.html                   # Auth Registration Page
25
   |    |  page-404.html                   # Error 404 page (page not found)
26
   |    |  page-500.html                   # Error 500 page (server error)
27
   |    |    *.html                        # All other pages provided by the UI Kit
28
   |
29
   |-- requirements.txt
30
   |
31
   |-- run.py
32
   |
33
   |-- *************************************
34
​
Copied!
​
Deployment
 The project comes with a basic configuration for Docker, HEROKU, Gunicorn, and Waitress. 
​Docker execution
The steps to start the template using Docker:
Step #1 - Clone/download the source code
1
$ git clone https://github.com/app-generator/boilerplate-code-jinja.git
2
$ cd boilerplate-code-jinja
Copied!
Step #2 - Start the app in Docker
1
$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d
Copied!
Visit http://localhost:5005 in your browser. The app should be up & running.
​
​Heroku Deployment
Steps to deploy on Heroku
​Create a FREE account on the Heroku platform
​Install the Heroku CLI that match your OS: Mac, Unix or Windows
Open a terminal window and authenticate via heroku login command
Clone the sources and push the project for LIVE deployment
1
$ # Clone the source code:
2
$ git clone https://github.com/app-generator/boilerplate-code-jinja.git
3
$ cd boilerplate-code-jinja
4
$
5
$ # Check Heroku CLI is installed
6
$ heroku -v
7
heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good
8
$
9
$ # Check Heroku CLI is installed
10
$ heroku login
11
$ # this commaond will open a browser window - click the login button (in browser)
12
$
13
$ # Create the Heroku project
14
$ heroku create
15
$
16
$ # Trigger the LIVE deploy
17
$ git push heroku master
18
$
19
$ # Open the LIVE app in browser
20
$ heroku open
Copied!
​