Boilerplate Jinja
Template boilerplate code used by AppSeed to generate simple starters coded in Flask.
Last updated
Was this helpful?
Template boilerplate code used by AppSeed to generate simple starters coded in Flask.
Last updated
Was this helpful?
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 /
Deployment scripts: Docker, Gunicorn/Nginx, HEROKU
To use the starter, should be installed properly in the workstation. If you are not sure if Python is installed, please open a terminal and type python --version
. Here is the full list with dependencies and tools required to build the app:
- the programming language used to code the app
- 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.
(Optional) Docker
- a popular virtualization software
👉 Step 1 - Download the code from the GH repository (using
GIT
)
👉 Step 2 - Start the APP in
Docker
Visit http://localhost:5085
in your browser. The app should be up & running.
Download the code
Unix
, MacOS
Install modules via
VENV
Set Up Flask Environment
Start the app
At this point, the app runs at http://127.0.0.1:5000/
.
Windows
Install modules via
VENV
(windows)
Set Up Flask Environment
Start the app
At this point, the app runs at http://127.0.0.1:5000/
.
The project is coded using a simple and intuitive structure presented below:
The project comes with a modern UI fully migrated and usable with Django Template Engine.
All pages and components are saved inside the apps/templates
directory. Here are the standard directories:
templates/layouts
: UI masterpages
templates/includes
: UI components (used across multiple pages)
templates/accounts
: login & registration page
templates/home
: all other pages served via a generic routing by apps/home
app
The static assets used by the project (JS
, CSS
, images
) are saved inside the apps/static/assets
folder. This path can be customized with ease via ASSETS_ROOT
variable saved in the .env
file.
How it works
.env
defines the ASSETS_ROOT
variable
core/settings.py
read the value of ASSETS_ROOT
and defaults to /static/assets
if not found:
All pages and components use the config.ASSETS_ROOT
variable. Here is a sample extracted from templates/layouts/base.html
:
At runtime, the href
property is resolved to /static/assets/css/style.css
based on the value saved in the .env
file:
production
apps/static/assets
- the folder where JS
, CSS
, and images
files are saved
ASSETS_ROOT
- environment variable, that defaults to /static/assets
if not defined
In production, the contents of the apps/static/assets
files should be copied to an external (public) directory and the ASSETS_ROOT
environment variable updated accordingly.
For instance, if the static
files are copied to https://cdn.your-server.com/datta-able-assets
, the .env
file should be updated as below:
As explained in the section, the assets are managed via:
👉 Access the page in case something is missing
👉 Use the to generate a new project