-
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
b281b36
commit a456241
Showing
2 changed files
with
109 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,186 @@ | ||
| # [Soft UI Design PRO Jinja](https://appseed.us/product/flask-soft-ui-design-pro) | ||
|
|
||
| **Jinja Template** provided by AppSeed on top of **Soft UI Design PRO**, a modern Bootstrap 5 design from Creative-Tim. The project might help beginners to code simple presentation websites on top of the existing codebase OR migrate the `production-ready` UI to a legacy Python-based project compatible with **Jinja Template Engine**: *Flask*, *Django*, *Bottle* of *FastAPI*. | ||
|
|
||
| # Soft UI Design PRO Flask/Jinja | ||
|
|
||
| **Flask Web App** generated by `AppSeed` op top of a modern design. Designed for those who like bold elements and beautiful websites, **Soft UI Design PRO** is ready to help you create stunning websites and webapps. | ||
|
|
||
| - 👉 [Soft UI Design PRO Flask](https://appseed.us/product/soft-ui-design-pro/flask/) - Product page | ||
| - 👉 [Soft UI Design PRO Flask](https://flask-soft-ui-design-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 /> | ||
|
|
||
| > Features: | ||
| > Built with [Soft UI Design PRO Generator](https://appseed.us/generator/soft-ui-design-pro/) | ||
| - `Up-to-date dependencies`: **Flask 2.0.1** | ||
| - [SCSS compilation](#recompile-css) via **Gulp** | ||
| - UI Kit: **Soft UI Design PRO** (premium Version) by **Creative-Tim** | ||
| - Render Engine: Flask / Jinja2 | ||
| - `Deployment`: **Docker**, Gunicorn/Nginx, HEROKU | ||
| - Support via **Github** (issues tracker) and [Discord](https://discord.gg/fZC6hup). | ||
| - Timestamp: `2022-06-14 09:30` | ||
| - Build ID: `6e19d8e2-5870-4075-90bb-e9e76d499f15` | ||
| - **Free [Support](https://appseed.us/support/)** (registered users) via `Email` and `Discord` | ||
|
|
||
| <br /> | ||
|
|
||
| > Links: | ||
| > Features | ||
| - 👉 [Soft UI Design PRO Jinja](https://jinja-soft-ui-design-pro.appseed-srv1.com) - LIVE Demo | ||
| - 👉 [Soft UI Design PRO Jinja](https://appseed.us/product/flask-soft-ui-design-pro) - Product Page | ||
| - `Up-to-date dependencies` | ||
| - Render Engine: Flask / [Jinja2](https://jinja.palletsprojects.com/) | ||
|
|
||
| <br /> | ||
|
|
||
| ## ✨ Quick Start in `Docker` | ||
|  | ||
|
|
||
| > Get the code | ||
| <br /> | ||
|
|
||
| ```bash | ||
| $ git clone https://github.com/app-generator/priv-jinja-soft-ui-design-pro.git | ||
| $ cd priv-jinja-soft-ui-design-pro | ||
| ``` | ||
| ## ✨ Start the app in Docker | ||
|
|
||
| > Start the app in Docker | ||
| > **Step 1** - Download the [code](https://appseed.us/product/soft-ui-design-pro/flask/) and unzip the sources (requires a `purchase`). | ||
| ```bash | ||
| $ docker-compose up --build | ||
| $ # Get the code | ||
| $ unzip flask-soft-ui-design-pro.zip | ||
| $ cd flask-soft-ui-design-pro | ||
| ``` | ||
|
|
||
| Visit `http://localhost:85` in your browser. The app should be up & running. | ||
|
|
||
| <br /> | ||
|
|
||
|  | ||
|
|
||
| <br /> | ||
|
|
||
| ## ✨ Build from sources | ||
| > **Step 2** - Edit `.env` and set `DEBUG=True`. This will activate the `SQLite` persistance. | ||
| ```bash | ||
| $ # Clone the sources | ||
| $ git clone https://github.com/app-generator/priv-jinja-soft-ui-design-pro.git | ||
| $ cd priv-jinja-soft-ui-design-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/ | ||
| ```txt | ||
| DEBUG=True | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| ## ✨ Code-base structure | ||
|
|
||
| The project has a simple structure, represented as bellow: | ||
| > **Step 3** - Start the APP in `Docker` | ||
| ```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 | ||
| | | ||
| |-- ************************************************************************ | ||
| $ docker-compose up --build | ||
| ``` | ||
|
|
||
| Visit `http://localhost:5085` in your browser. The app should be up & running. | ||
|
|
||
| <br /> | ||
|
|
||
| ## ✨ Recompile CSS | ||
| ## ✨ How to use it | ||
|
|
||
| To recompile SCSS files, follow this setup: | ||
| > Download the [code](https://appseed.us/product/soft-ui-design-pro/flask/) and unzip the sources (requires a `purchase`). | ||
| <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) | ||
| ```bash | ||
| $ # Get the code | ||
| $ unzip flask-soft-ui-design-pro.zip | ||
| $ cd flask-soft-ui-design-pro | ||
| ``` | ||
|
|
||
| <br /> | ||
|
|
||
| **Step #2** - Change the working directory to `assets` folder | ||
| ### 👉 Set Up for `Unix`, `MacOS` | ||
|
|
||
| > 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. | ||
| At this point, the app runs at `http://127.0.0.1:5000/`. | ||
|
|
||
| <br /> | ||
|
|
||
| ## ✨ Deployment | ||
| ### 👉 Set Up for `Windows` | ||
|
|
||
| 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/). | ||
| > Install modules via `VENV` (windows) | ||
| ### [Heroku](https://www.heroku.com/) | ||
| --- | ||
| ``` | ||
| $ virtualenv env | ||
| $ .\env\Scripts\activate | ||
| $ pip3 install -r requirements.txt | ||
| ``` | ||
|
|
||
| Steps to deploy on **Heroku** | ||
| <br /> | ||
|
|
||
| - [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-soft-ui-design-pro.git | ||
| $ cd priv-jinja-soft-ui-design-pro | ||
| $ | ||
| $ # Check Heroku CLI is installed | ||
| $ heroku -v | ||
| heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good | ||
| $ # CMD | ||
| $ set FLASK_APP=run.py | ||
| $ set FLASK_ENV=development | ||
| $ | ||
| $ # Check Heroku CLI is installed | ||
| $ heroku login | ||
| $ # this commaond will open a browser window - click the login button (in browser) | ||
| $ | ||
| $ # 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. | ||
|
|
||
| > 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 /> | ||
|
|
||
| --- | ||
| [Soft UI Design PRO Jinja](https://appseed.us/product/flask-soft-ui-design-pro) - Provided by **AppSeed** [App Generator](https://appseed.us/app-generator). | ||
| Soft UI Design PRO Flask/Jinja - Seed Project generated by **[AppSeed Generator](https://appseed.us/generator/)**. |