|
|
@@ -4,8 +4,7 @@ Open-source **Flask Dashboard** generated by `AppSeed` op top of a modern `Boots
|
|
|
|
|
|
- 👉 [Black Dashboard Flask](https://appseed.us/product/black-dashboard/flask/) - `product page`
|
|
|
- 👉 [Black Dashboard Flask](https://flask-black-dashboard.appseed-srv1.com/) - `LIVE Demo`
|
|
|
-- ✅ Compatible with [LIVE Deployer](https://appseed.us/go-live/)
|
|
|
- - [Deploy Black Dashboard with Drag & Drop](https://www.youtube.com/watch?v=WhawUr_yoMc) - `video material`
|
|
|
+
|
|
|
|
|
|
<br />
|
|
|
|
|
|
@@ -24,7 +23,7 @@ Open-source **Flask Dashboard** generated by `AppSeed` op top of a modern `Boots
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-## ✨ Start the app in Docker
|
|
|
+## Start with `Docker`
|
|
|
|
|
|
> 👉 **Step 1** - Download the code from the GH repository (using `GIT`)
|
|
|
|
|
|
@@ -45,7 +44,7 @@ Visit `http://localhost:5085` in your browser. The app should be up & running.
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-## ✨ Create/Edit `.env` file
|
|
|
+## Create/Edit `.env` file
|
|
|
|
|
|
The meaning of each variable can be found below:
|
|
|
|
|
|
@@ -59,7 +58,7 @@ The meaning of each variable can be found below:
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-## ✨ Manual Build
|
|
|
+## Manual Build
|
|
|
|
|
|
> Download the code
|
|
|
|
|
|
@@ -141,110 +140,34 @@ At this point, the app runs at `http://127.0.0.1:5000/`.
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-## Deploy on Render
|
|
|
-
|
|
|
-The product can be easily deployed on Render using [Python Deployer](https://github.com/app-generator/deploy-automation-render) (`open-source` tool).
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-> 👉 **Step 1**: Set UP a [Render](https://render.com/) account
|
|
|
-
|
|
|
-- Create account
|
|
|
-- Create an [API_KEY](https://render.com/docs/api)
|
|
|
-- Attach a `credit card` to the account
|
|
|
- - **Note**: Each Python service deployed on Render requires a monthly payment
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-> 👉 **Step 2**: Download [Python Deployer](https://github.com/app-generator/deploy-automation-render)
|
|
|
-
|
|
|
-```bash
|
|
|
-$ git clone https://github.com/app-generator/deploy-automation-render.git
|
|
|
-$ cd deploy-automation-render
|
|
|
-$ pip install -r requirements.txt
|
|
|
-```
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-> 👉 **Step 3**: Set up the `ENV` as suggested in the [deployer](https://github.com/app-generator/deploy-automation-render) help
|
|
|
-
|
|
|
-```bash
|
|
|
-$ export RENDER_API_KEY=<RENDER_API_KEY> # mandatory
|
|
|
-$ export RENDER_OWNER_ID=<RENDER_OWNER_ID> # needs to have a CC attached, used for Billing
|
|
|
-```
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-> 👉 **Step 4**: Deploy the repo
|
|
|
-
|
|
|
-```bash
|
|
|
-$ python.exe deployer.py flask https://github.com/app-generator/flask-star-admin "run:app"
|
|
|
-```
|
|
|
-
|
|
|
-The new service should be visible on your Render Dashboard and soon be LIVE.
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-https://user-images.githubusercontent.com/51070104/202263931-80ae9178-f92d-421a-9c83-3c5f5d6404c8.mp4
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-### 👉 Create Users
|
|
|
-
|
|
|
-By default, the app redirects guest users to authenticate. In order to access the private pages, follow this set up:
|
|
|
-
|
|
|
-- Start the app via `flask run`
|
|
|
-- Access the `registration` page and create a new user:
|
|
|
- - `http://127.0.0.1:5000/register`
|
|
|
-- Access the `sign in` page and authenticate
|
|
|
- - `http://127.0.0.1:5000/login`
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-## Recompile CSS
|
|
|
+## Recompile SCSS
|
|
|
|
|
|
-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)
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-> 👉 **Step #2** - Change the working directory to `assets` folder
|
|
|
+The SCSS/CSS files used to style the Ui are saved in the `apps/static/assets` directory.
|
|
|
+In order to update the Ui colors (primary, secondary) this procedure needs to be followed.
|
|
|
|
|
|
```bash
|
|
|
-$ cd apps/static/assets
|
|
|
+$ yarn # install modules
|
|
|
+$ # # edit variables
|
|
|
+$ vi apps/static/assets/scss/black-dashboard/custom/_variables.scss
|
|
|
+$ gulp # SCSS to CSS translation
|
|
|
```
|
|
|
|
|
|
-<br />
|
|
|
-
|
|
|
-> 👉 **Step #3** - Install modules (this will create a classic `node_modules` directory)
|
|
|
+The `_variables.scss` content defines the `primary` and `secondary` colors:
|
|
|
|
|
|
-```bash
|
|
|
-$ npm install
|
|
|
-// OR
|
|
|
-$ yarn
|
|
|
+```scss
|
|
|
+$default: #344675 !default; // EDIT for customization
|
|
|
+$primary: #e14eca !default; // EDIT for customization
|
|
|
+$secondary: #f4f5f7 !default; // EDIT for customization
|
|
|
+$success: #00f2c3 !default; // EDIT for customization
|
|
|
+$info: #1d8cf8 !default; // EDIT for customization
|
|
|
+$warning: #ff8d72 !default; // EDIT for customization
|
|
|
+$danger: #fd5d93 !default; // EDIT for customization
|
|
|
+$black: #222a42 !default; // EDIT for customization
|
|
|
```
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-> 👉 **Step #4** - Edit & Recompile SCSS files
|
|
|
-
|
|
|
-```bash
|
|
|
-$ gulp
|
|
|
-```
|
|
|
-
|
|
|
-The generated file is saved in `static/assets/css` directory.
|
|
|
-
|
|
|
-<br />
|
|
|
-
|
|
|
-## ✨ Code-base structure
|
|
|
+## Codebase structure
|
|
|
|
|
|
The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:
|
|
|
|
|
|
@@ -297,7 +220,7 @@ The project is coded using blueprints, app factory pattern, dual configuration p
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-## PRO Version
|
|
|
+## [Black Dashboard Flask](https://appseed.us/product/black-dashboard-pro/flask/) `PRO Version`
|
|
|
|
|
|
> For more components, pages and priority on support, feel free to take a look at this amazing starter:
|
|
|
|
|
|
@@ -314,4 +237,4 @@ Black Dashboard is a premium Bootstrap Design now available for download in Djan
|
|
|
<br />
|
|
|
|
|
|
---
|
|
|
-[Black Dashboard Flask](https://appseed.us/product/black-dashboard/flask/) - Open-source starter generated by **[App Generator](https://appseed.us/generator/)**.
|
|
|
+[Black Dashboard Flask](https://appseed.us/product/black-dashboard/flask/) - Open-source starter generated by **[AppSeed](https://appseed.us)**.
|