-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0f21f3e
commit 00f7a77
Showing
2 changed files
with
104 additions
and
197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,283 +1,184 @@ | ||
| # [Jinja Template](https://appseed.us/jinja-template) - Volt PRO | ||
| # Flask/Jinja Volt Dashboard PRO | ||
|
|
||
| **Jinja Template** starter generated by the AppSeed platform on top of **[Volt Dashboard PRO](https://docs.appseed.us/bootstrap-template/volt-dashboard-pro/)** Design. The codebase is basically a simple Flask starter without a database or hard dependencies. The template can be used for UI integration into legacy Python-based products. | ||
| **Flask/Jinja Template** generated by `AppSeed` op top of **[Volt Dashboard PRO](https://appseed.us/generator/volt-dashboard/)**, a modern `Bootstrap 5` dashboard design. The project is a super simple Flask project WITHOUT database, ORM, or any other hard dependency. The project can be used as a codebase for future project or to migrate the Jinja files and assets to a legacy Python-based project that uses Jinja as template engine (Flask, Bottle, Django). | ||
|
|
||
| - 👉 [Volt Dashboard PRO Flask](https://appseed.us/product/volt-dashboard-pro/flask/) - Product page | ||
| - 👉 [Volt Dashboard PRO Flask](https://flask-volt-pro.appseed-srv1.com/) - LIVE Demo | ||
| - 👉 [Complete documentation](https://docs.appseed.us/boilerplate-code/boilerplate-jinja) - `Learn how to use and update the product` | ||
| - ✅ [Set up the environment](https://docs.appseed.us/boilerplate-code/boilerplate-jinja#environment) | ||
| - ✅ [Start in Docker](https://docs.appseed.us/boilerplate-code/boilerplate-jinja#start-the-app-in-docker) | ||
| - ✅ [Codebase structure](https://docs.appseed.us/boilerplate-code/boilerplate-jinja#codebase-structure) | ||
| - ✅ [UI Assets and Templates](https://docs.appseed.us/boilerplate-code/boilerplate-jinja#ui-assets-and-templates) | ||
|
|
||
| <br /> | ||
|
|
||
| > Jinja Template Features | ||
| > Built with [Volt Dashboard Generator](https://appseed.us/generator/volt-dashboard/) | ||
| - UI Kit: **Volt Dashboard PRO** (v1.2.0) by **Themesberg** | ||
| - Render Engine: Flask / [Jinja2](https://jinja.palletsprojects.com/) | ||
| - Support via **Github** and [Discord](https://discord.gg/fZC6hup). | ||
| - Timestamp: `2022-06-12 19:28` | ||
| - Build ID: `2510f465-00b3-4e71-be86-62ab455ec33a` | ||
| - **Free [Support](https://appseed.us/support/)** (registered users) via `Email` and `Discord` | ||
|
|
||
| <br /> | ||
|
|
||
| > Links | ||
| > Features | ||
| - [Jinja Volt PRO](https://appseed.us/jinja-template/jinja-template-volt-pro) - Product page | ||
| - [Jinja Volt PRO - Demo](https://jinja-volt-pro.appseed-srv1.com/) - LIVE Demo | ||
| - [Jinja Volt PRO - Docs](https://docs.appseed.us/products/jinja-templates/volt-dashboard-pro) - Product documentation | ||
| - `Up-to-date dependencies` | ||
| - Render Engine: Flask / [Jinja2](https://jinja.palletsprojects.com/) | ||
|
|
||
| <br /> | ||
|
|
||
| ## Quick Start in [Docker](https://www.docker.com/) | ||
|  | ||
|
|
||
| > Get the code | ||
| <br /> | ||
|
|
||
| ```bash | ||
| $ git clone https://github.com/app-generator/priv-jinja-dashboard-volt-pro.git | ||
| $ cd priv-jinja-dashboard-volt-pro | ||
| ``` | ||
| ## ✨ Start the app in Docker | ||
|
|
||
| > Start the app in Docker | ||
| > **Step 1** - Download the [code](https://appseed.us/product/volt-dashboard-pro/flask/) and unzip the sources (requires a `purchase`). | ||
| ```bash | ||
| $ docker-compose pull # download dependencies | ||
| $ docker-compose build # local set up | ||
| $ docker-compose up -d # start the app | ||
| $ # Get the code | ||
| $ unzip flask-volt-dashboard-pro.zip | ||
| $ cd flask-volt-dashboard-pro | ||
| ``` | ||
|
|
||
| Visit `http://localhost:85` in your browser. The app should be up & running. | ||
|
|
||
| <br /> | ||
|
|
||
|  | ||
| > **Step 2** - Edit `.env` and set `DEBUG=True`. This will activate the `SQLite` persistance. | ||
| ```txt | ||
| DEBUG=True | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| ## Build from sources | ||
| > **Step 3** - Start the APP in `Docker` | ||
| ```bash | ||
| $ # Clone the sources | ||
| $ git clone https://github.com/app-generator/priv-jinja-template-volt-pro.git | ||
| $ cd priv-jinja-template-volt-pro | ||
| $ | ||
| $ # Virtualenv modules installation (Unix based systems) | ||
| $ virtualenv env | ||
| $ source env/bin/activate | ||
| $ | ||
| $ # Virtualenv modules installation (Windows based systems) | ||
| $ # virtualenv env | ||
| $ # .\env\Scripts\activate | ||
| $ | ||
| $ # Install requirements | ||
| $ pip3 install -r requirements.txt | ||
| $ | ||
| $ # Set the FLASK_APP environment variable | ||
| $ (Unix/Mac) export FLASK_APP=run.py | ||
| $ (Windows) set FLASK_APP=run.py | ||
| $ (Powershell) $env:FLASK_APP = ".\run.py" | ||
| $ | ||
| $ # Set up the DEBUG environment | ||
| $ # (Unix/Mac) export FLASK_ENV=development | ||
| $ # (Windows) set FLASK_ENV=development | ||
| $ # (Powershell) $env:FLASK_ENV = "development" | ||
| $ | ||
| $ # Run the Jinja Volt PRO | ||
| $ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1) | ||
| $ # --port=5000 - specify the app port (default 5000) | ||
| $ flask run --host=0.0.0.0 --port=5000 | ||
| $ | ||
| $ # Access the UI in browser: http://127.0.0.1:5000/ | ||
| $ docker-compose up --build | ||
| ``` | ||
|
|
||
| Visit `http://localhost:5085` in your browser. The app should be up & running. | ||
|
|
||
| <br /> | ||
|
|
||
| ## Code-base structure | ||
| ## ✨ How to use it | ||
|
|
||
| The project has a simple structure, represented as bellow: | ||
| > Download the [code](https://appseed.us/product/volt-dashboard-pro/flask/) and unzip the sources (requires a `purchase`). | ||
| ```bash | ||
| < PROJECT ROOT > | ||
| | | ||
| |-- app/__init__.py | ||
| |-- app/ | ||
| | |-- static/ | ||
| | | |-- <css, JS, images> # CSS files, Javascripts files | ||
| | | | ||
| | |-- templates/ | ||
| | | | | ||
| | | |-- includes/ # Page chunks, components | ||
| | | | | | ||
| | | | |-- navigation.html # Top bar | ||
| | | | |-- sidebar.html # Left sidebar | ||
| | | | |-- scripts.html # JS scripts common to all pages | ||
| | | | |-- footer.html # The common footer | ||
| | | | | ||
| | | |-- layouts/ # App Layouts (the master pages) | ||
| | | | | | ||
| | | | |-- base.html # Used by common pages like index, UI | ||
| | | | |-- base-fullscreen.html # Used by auth pages (login, register) | ||
| | | | | ||
| | | index.html # The default page | ||
| | | login.html # Auth Login Page | ||
| | | register.html # Auth Registration Page | ||
| | | page-404.html # Error 404 page (page not found) | ||
| | | page-500.html # Error 500 page (server error) | ||
| | | *.html # All other pages provided by the UI Kit | ||
| | | ||
| |-- requirements.txt | ||
| | | ||
| |-- run.py | ||
| | | ||
| |-- ************************************************************************ | ||
| $ # Get the code | ||
| $ unzip flask-volt-dashboard-pro.zip | ||
| $ cd flask-volt-dashboard-pro | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| ## Recompile CSS | ||
|
|
||
| To recompile SCSS files, follow this setup: | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #1** - Install tools | ||
|
|
||
| - [NodeJS](https://nodejs.org/en/) 12.x or higher | ||
| - [Gulp](https://gulpjs.com/) - globally | ||
| - `npm install -g gulp-cli` | ||
| - [Yarn](https://yarnpkg.com/) (optional) | ||
| ### 👉 Set Up for `Unix`, `MacOS` | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #2** - Change the working directory to `assets` folder | ||
| > Install modules via `VENV` | ||
| ```bash | ||
| $ cd app/base/static/assets | ||
| $ virtualenv env | ||
| $ source env/bin/activate | ||
| $ pip3 install -r requirements.txt | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #3** - Install modules (this will create a classic `node_modules` directory) | ||
| > Set Up Flask Environment | ||
| ```bash | ||
| $ npm install | ||
| // OR | ||
| $ yarn | ||
| $ export FLASK_APP=run.py | ||
| $ export FLASK_ENV=development | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #4** - Edit & Recompile SCSS files | ||
| > Start the app | ||
| ```bash | ||
| $ gulp | ||
| $ flask run | ||
| ``` | ||
|
|
||
| The generated files (css, min.css) are saved in `static/assets/css` directory. | ||
|
|
||
| <br /> | ||
|
|
||
| ## Deployment | ||
|
|
||
| The project comes with a basic configuration for [Docker](https://www.docker.com/), [HEROKU](https://www.heroku.com/), [Gunicorn](https://gunicorn.org/), and [Waitress](https://docs.pylonsproject.org/projects/waitress/en/stable/). | ||
| At this point, the app runs at `http://127.0.0.1:5000/`. | ||
|
|
||
| <br /> | ||
|
|
||
| ### [Docker](https://www.docker.com/) execution | ||
| --- | ||
|
|
||
| The steps to start the template using Docker: | ||
| ### 👉 Set Up for `Windows` | ||
|
|
||
| > Get the code | ||
| > Install modules via `VENV` (windows) | ||
| ```bash | ||
| $ git clone https://github.com/app-generator/priv-jinja-template-volt-pro.git | ||
| $ cd priv-jinja-template-volt-pro | ||
| ``` | ||
|
|
||
| > Start the app in Docker | ||
| ```bash | ||
| $ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d | ||
| $ virtualenv env | ||
| $ .\env\Scripts\activate | ||
| $ pip3 install -r requirements.txt | ||
| ``` | ||
|
|
||
| Visit `http://localhost:5005` in your browser. The app should be up & running. | ||
|
|
||
| <br /> | ||
|
|
||
| ### [Heroku](https://www.heroku.com/) | ||
| --- | ||
|
|
||
| Steps to deploy on **Heroku** | ||
|
|
||
| - [Create a FREE account](https://signup.heroku.com/) on Heroku platform | ||
| - [Install the Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-python#set-up) 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 | ||
| > Set Up Flask Environment | ||
| ```bash | ||
| $ # Clone the source code: | ||
| $ git clone https://github.com/app-generator/priv-jinja-template-volt-pro.git | ||
| $ cd priv-jinja-template-volt-pro | ||
| $ | ||
| $ # Check Heroku CLI is installed | ||
| $ heroku -v | ||
| heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good | ||
| $ | ||
| $ # Check Heroku CLI is installed | ||
| $ heroku login | ||
| $ # this commaond will open a browser window - click the login button (in browser) | ||
| $ # CMD | ||
| $ set FLASK_APP=run.py | ||
| $ set FLASK_ENV=development | ||
| $ | ||
| $ # Create the Heroku project | ||
| $ heroku create | ||
| $ | ||
| $ # Trigger the LIVE deploy | ||
| $ git push heroku master | ||
| $ | ||
| $ # Open the LIVE app in browser | ||
| $ heroku open | ||
| $ # Powershell | ||
| $ $env:FLASK_APP = ".\run.py" | ||
| $ $env:FLASK_ENV = "development" | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| ### [Gunicorn](https://gunicorn.org/) | ||
| --- | ||
|
|
||
| Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX. | ||
|
|
||
| > Install using pip | ||
| ```bash | ||
| $ pip install gunicorn | ||
| ``` | ||
| > Start the app using gunicorn binary | ||
| > Start the app | ||
| ```bash | ||
| $ gunicorn --bind 0.0.0.0:8001 run:app | ||
| Serving on http://localhost:8001 | ||
| $ flask run | ||
| ``` | ||
|
|
||
| Visit `http://localhost:8001` in your browser. The app should be up & running. | ||
| At this point, the app runs at `http://127.0.0.1:5000/`. | ||
|
|
||
| <br /> | ||
|
|
||
| ### [Waitress](https://docs.pylonsproject.org/projects/waitress/en/stable/) | ||
| --- | ||
|
|
||
| Waitress (Gunicorn equivalent for Windows) is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library. | ||
|
|
||
| > Install using pip | ||
| ### 👉 Code-base structure | ||
|
|
||
| ```bash | ||
| $ pip install waitress | ||
| ``` | ||
| > Start the app using [waitress-serve](https://docs.pylonsproject.org/projects/waitress/en/stable/runner.html) | ||
| The project has a simple, intuitive structure presented bellow: | ||
|
|
||
| ```bash | ||
| $ waitress-serve --port=8001 run:app | ||
| Serving on http://localhost:8001 | ||
| < PROJECT ROOT > | ||
| | | ||
| |-- apps/__init__.py | ||
| |-- apps/ | ||
| | |-- static/ | ||
| | | |-- <css, JS, images> # CSS files, Javascripts files | ||
| | | | ||
| | |-- templates/ | ||
| | | | ||
| | |-- includes/ # Page chunks, components | ||
| | | | | ||
| | | |-- navigation.html # Top bar | ||
| | | |-- sidebar.html # Left sidebar | ||
| | | |-- scripts.html # JS scripts common to all pages | ||
| | | |-- footer.html # The common footer | ||
| | | | ||
| | |-- layouts/ # App Layouts (the master pages) | ||
| | | | | ||
| | | |-- base.html # Used by common pages like index, UI | ||
| | | |-- base-fullscreen.html # Used by auth pages (login, register) | ||
| | | | ||
| | index.html # The default page | ||
| | page-404.html # Error 404 page (page not found) | ||
| | page-500.html # Error 500 page (server error) | ||
| | *.html # All other pages provided by the UI Kit | ||
| | | ||
| |-- requirements.txt | ||
| | | ||
| |-- run.py | ||
| | | ||
| |-- ************************************************************************ | ||
| ``` | ||
|
|
||
| Visit `http://localhost:8001` in your browser. The app should be up & running. | ||
|
|
||
| <br /> | ||
|
|
||
| ## Credits & Links | ||
|
|
||
| - [Flask Framework](https://www.palletsprojects.com/p/flask/) - The official website | ||
|
|
||
| <br /> | ||
|
|
||
| --- | ||
| [Jinja Volt PRO](https://jinja-template-volt-pro.appseed.us/) - Provided by **AppSeed** [Web App Generator](https://appseed.us/app-generator). | ||
| Flask/Jinja Volt Dashboard PRO - Seed Project generated by **[AppSeed Generator](https://appseed.us/generator/)**. |