-
Notifications
You must be signed in to change notification settings - Fork 0
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
ea76d91
commit 1d3f158
Showing
2 changed files
with
111 additions
and
186 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,269 +1,188 @@ | ||
| # Jinja Material Kit PRO | ||
| # Flask Material Kit PRO | ||
|
|
||
| > Template Theme provided by [AppSeed](https://appseed.us) - Features: | ||
| - Up-to-date dependencies: **Flask 2.0.1** | ||
| - [SCSS compilation](#recompile-css) via **Gulp** | ||
| - UI Kit: **Material Kit PRO** by **Creative-Tim** | ||
| - Render Engine: Flask / [Jinja2](https://jinja.palletsprojects.com/) | ||
| - **Commercial License**: [Personal](https://github.com/app-generator/license-personal) / [Developer](https://github.com/app-generator/license-developer) | ||
| - 24/7 Live Support via [Discord](https://discord.gg/fZC6hup). | ||
| Seed project generated by AppSeed in **Flask** Framework on top of **Material Kit PRO** Design (Bootstrap 4 version) Designed for those who like bold elements and beautiful websites, **Material Kit PRO** is ready to help you create stunning websites and web apps. | ||
|
|
||
| - 👉 [Flask Material Kit PRO](https://appseed.us/product/material-kit-pro/flask/) - product page | ||
| - 👉 [Flask Material Kit PRO](https://flask-material-kit-pro.appseed-srv1.com/) - LIVE App | ||
| - 👉 [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 /> | ||
|
|
||
| > Links | ||
| - [Jinja Material Dashboard PRO](https://jinja-material-kit-pro.appseed-srv1.com) - starter in action | ||
| - More [Jinja Templates](https://appseed.us/jinja-template) provided by AppSeed | ||
| > Built with [Material Kit Generator PRO](https://appseed.us/generator/material-kit-pro/) | ||
| - Timestamp: `2022-06-11 15:46` | ||
| - Build ID: `189308d9-3e5d-46d0-9273-f485d0dc89f4` | ||
| - **Free [Support](https://appseed.us/support/)** (registered users) via `Email` and `Discord` | ||
|
|
||
| <br /> | ||
|
|
||
|  | ||
| > Features | ||
| - `Up-to-date dependencies` | ||
| - Render Engine: Flask / [Jinja2](https://jinja.palletsprojects.com/) | ||
|
|
||
| <br /> | ||
|
|
||
| ## Build from sources | ||
|
|
||
| ```bash | ||
| $ # Clone the sources | ||
| $ git clone https://github.com/app-generator/priv-jinja-material-kit-pro.git | ||
| $ cd priv-jinja-material-kit-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 Template | ||
| $ # --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/ | ||
| ``` | ||
|  | ||
|
|
||
| <br /> | ||
|
|
||
| ## Code-base structure | ||
| ## ✨ Start the app in Docker | ||
|
|
||
| The project has a simple structure, represented as bellow: | ||
| > **Step 1** - Download the [code](https://appseed.us/product/material-kit-pro/flask/) and unzip the sources (requires a `purchase`). | ||
| ```bash | ||
| < PROJECT ROOT > | ||
| | | ||
| |-- 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) | ||
| | | | | ||
| | | |-- accounts/ # Auth Pages (login, register) | ||
| | | | | | ||
| | | | |-- login.html # Use layout `base-fullscreen.html` | ||
| | | | |-- register.html # Use layout `base-fullscreen.html` | ||
| | | | | ||
| | | |-- home/ # UI Kit Pages | ||
| | | |-- index.html # Index page | ||
| | | |-- 404-page.html # 404 page | ||
| | | |-- *.html # All other pages | ||
| | | | ||
| | views.py # Application Routes | ||
| | | ||
| |-- Dockerfile # Deployment | ||
| |-- docker-compose.yml # Deployment | ||
| |-- gunicorn-cfg.py # Deployment | ||
| |-- nginx # Deployment | ||
| | |-- appseed-app.conf # Deployment | ||
| | | ||
| |-- requirements.txt | ||
| |-- run.py | ||
| | | ||
| |-- ************************************************************************ | ||
| $ # Get the code | ||
| $ unzip flask-material-kit-pro.zip | ||
| $ cd flask-material-kit-pro | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| ## Recompile CSS | ||
| > **Step 2** - Edit `.env` and set `DEBUG=True`. This will activate the `SQLite` persistance. | ||
| To recompile SCSS files, follow this setup: | ||
| ```txt | ||
| DEBUG=True | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #1** - Install tools | ||
| > **Step 3** - Start the APP in `Docker` | ||
| - [NodeJS](https://nodejs.org/en/) 12.x or higher | ||
| - [Gulp](https://gulpjs.com/) - globally | ||
| - `npm install -g gulp-cli` | ||
| - [Yarn](https://yarnpkg.com/) (optional) | ||
| ```bash | ||
| $ docker-compose up --build | ||
| ``` | ||
|
|
||
| Visit `http://localhost:5085` in your browser. The app should be up & running. | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #2** - Change the working directory to `assets` folder | ||
| ## ✨ How to use it | ||
|
|
||
| > Download the [code](https://appseed.us/product/material-kit-pro/flask/) and unzip the sources (requires a `purchase`). | ||
| ```bash | ||
| $ cd app/static/assets | ||
| $ # Get the code | ||
| $ unzip flask-material-kit-pro.zip | ||
| $ cd flask-material-kit-pro | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #3** - Install modules (this will create a classic `node_modules` directory) | ||
| ### 👉 Set Up for `Unix`, `MacOS` | ||
|
|
||
| > Install modules via `VENV` | ||
| ```bash | ||
| $ npm install | ||
| // OR | ||
| $ yarn | ||
| $ virtualenv env | ||
| $ source env/bin/activate | ||
| $ pip3 install -r requirements.txt | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #4** - Edit & Recompile SCSS files | ||
| > Set Up Flask Environment | ||
| ```bash | ||
| $ gulp scss | ||
| $ export FLASK_APP=run.py | ||
| $ export FLASK_ENV=development | ||
| ``` | ||
|
|
||
| The generated file is saved in `static/assets/css` directory. | ||
|
|
||
| <br /> | ||
|
|
||
| ## Deployment | ||
| > Start the app | ||
| ```bash | ||
| $ flask run | ||
| ``` | ||
|
|
||
| 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-material-kit-pro.git | ||
| $ cd priv-jinja-material-kit-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:85` 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-material-kit-pro.git | ||
| $ cd priv-jinja-material-kit-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 | ||
| > Start the app | ||
| ```bash | ||
| $ pip install gunicorn | ||
| $ flask run | ||
| ``` | ||
| > Start the app using gunicorn binary | ||
|
|
||
| ```bash | ||
| $ gunicorn --bind 0.0.0.0:8001 run:app | ||
| Serving on http://localhost:8001 | ||
| ``` | ||
|
|
||
| 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. | ||
| ## ✨ Code-base structure | ||
|
|
||
| > Install using pip | ||
| The project has a simple, intuitive structure presented bellow: | ||
|
|
||
| ```bash | ||
| $ pip install waitress | ||
| ``` | ||
| > Start the app using [waitress-serve](https://docs.pylonsproject.org/projects/waitress/en/stable/runner.html) | ||
| ```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 Material Kit PRO - Provided by **AppSeed** [App Generator](https://appseed.us/app-generator). | ||
| Flask/Jinja Material Kit PRO - Seed project generated by **[AppSeed Generator](https://appseed.us/generator/)**. |