|
1 | | -# [Flask React Datta Able](https://appseed.us/product/flask-react-datta-able) |
| 1 | +# [Flask React Datta Able](https://appseed.us/product/datta-able/api-server-flask/react/) |
2 | 2 |
|
3 | | -Open-source full-stack seed project coded in React and Flask on top of a modern design from CodedThemes. The **[Flask React](https://appseed.us/product/flask-react-datta-able)** codebase is already configured with an SQLite database, API (via **Flask-RextX**), and JWT token-based authentication flow. **Datta Able** is an open-source **React Dashboard** that provides a colorful and modern design. |
| 3 | +Full-Stack Seed project generated by **[React App Generator](https://appseed.us/generator/react/)** top of *Datta Able* design from **[CodedThemes](https://codedthemes.com/?ref=appseed)**. |
| 4 | +The backend logic is provided by a simple, `easy-to-extend` API Server that manages the Authentication flow (login, registration, logout) using `JSON Web Tokens` (JWT). |
4 | 5 |
|
5 | | -<br /> |
| 6 | +- 👉 [Flask React Datta Able](https://appseed.us/product/datta-able/api-server-flask/react/) - `Product Page` |
| 7 | +- 👉 [Flask React Datta Able](https://flask-react-datta-able.appseed-srv1.com) - `LIVE Demo` |
| 8 | + |
| 9 | + |
| 10 | + |
| 11 | +<br > |
6 | 12 |
|
7 | | -> Features |
| 13 | +## ✨ `React` Datta Able |
8 | 14 |
|
9 | | -- Modern aesthetics UI design - Designed by [CodedThemes](https://bit.ly/37fF9RT) |
| 15 | +- Modern aesthetics UI design - crafted by *[CodedThemes](https://bit.ly/37fF9RT)* |
10 | 16 | - React, Redux, Redux-persist |
11 | | -- Authentication: JWT Login/Register/Logout |
12 | | -- Backend: [Flask API Server](https://github.com/app-generator/api-server-flask) |
13 | 17 |
|
14 | 18 | <br /> |
15 | 19 |
|
16 | | -> Links |
| 20 | +> `Tests` (compatibility matrix) |
17 | 21 |
|
18 | | -- [Flask React Datta Able](https://appseed.us/product/flask-react-datta-able) - product page |
19 | | -- [Flask React Datta Able](https://flask-react-datta-able.appseed-srv1.com/) - LIVE Demo |
20 | | -- [Flask React Datta Able](https://docs.appseed.us/products/react/flask-datta-able) - product documentation |
21 | | -- Download Backend: [Flask API Server 📥](https://github.com/app-generator/api-server-flask/archive/refs/heads/main.zip) |
22 | | -- Donwnload Frontend: [React Datta Able 📥](https://github.com/app-generator/react-node-js-datta-able/archive/refs/heads/main.zip) |
| 22 | +| NodeJS | NPM | YARN | |
| 23 | +| --- | --- | --- | |
| 24 | +| `v14.0.0` | ❌ | ✅ | |
| 25 | +| `v16.0.0` | ✅ | ✅ | |
| 26 | +| `v18.0.0` | ❌ | ❌ | |
23 | 27 |
|
24 | | -<br > |
25 | 28 |
|
26 | | -> **Note**: This product can be used with other API Servers for a complete fullstack experience. **ALL API servers use an unified interface** |
| 29 | +<br /> |
| 30 | + |
| 31 | +## ✨ `Flask API` Features |
27 | 32 |
|
28 | | -- [Django API Server](https://github.com/app-generator/api-server-django) - open-source product |
29 | | -- [Node JS API Server](https://github.com/app-generator/api-server-nodejs) - open-source product / Typescript / SQLite / TypeORM / Joy for validation |
30 | | -- [Node JS API Server PRO](https://github.com/app-generator/api-server-nodejs-pro) - **commercial product** |
31 | | - - SQLite / TypeORM / Joy / Docker |
32 | | - - MongoDB / Mongoose / Joy Docker (separate branch, same project) |
| 33 | +- Stack: `Flask` / `Flask-RestX` / **SQLite** |
| 34 | +- **DB Layer**: `SqlAlchemyORM`, `SQLite` persistence |
| 35 | +- **Auth**: JWT tokens managed via `Flask-jwt_extended` |
| 36 | +- [API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition) - the unified API structure implemented by this server |
33 | 37 |
|
34 | | -<br /> |
35 | 38 |
|
36 | | - |
| 39 | +<br /> |
37 | 40 |
|
38 | | -<br /> |
| 41 | +## ✨ How to use it |
39 | 42 |
|
40 | | -## Start Flask API Server |
| 43 | +Being a full-stack product, the backend and the frontend should be compiled and started separately. |
| 44 | +Before starting to compile the product, make sure you have the following tools installed in the environment: |
41 | 45 |
|
42 | | -Simple starter built with Python / Flask-RestX / Sqlite3 and JWT Auth. The authentication flow is based on [json web tokens](https://jwt.io). |
| 46 | +- [NodeJS](https://nodejs.org/en/) - version `14.x` or higher |
| 47 | +- [GIT](https://git-scm.com/) - used to clone tjhe sources from Github |
| 48 | +- [Python3](https://www.python.org/) - used in many tools |
43 | 49 |
|
44 | 50 | <br /> |
45 | 51 |
|
46 | | -> How to use the code |
| 52 | +### 👉 Start the Frontend |
47 | 53 |
|
48 | | -**Clone the sources** |
| 54 | +> **Step 1** - Once the project is downloaded, change the directory to `react-ui`. |
49 | 55 |
|
50 | 56 | ```bash |
51 | | -$ git clone https://github.com/app-generator/api-server-flask.git |
52 | | -$ cd api-server-flask |
| 57 | +$ cd react-ui |
53 | 58 | ``` |
54 | 59 |
|
55 | | -**Create a virtual environment** |
56 | | - |
57 | | -```bash |
58 | | -$ virtualenv -p python3 venv |
59 | | -$ source venv/bin/activate |
60 | | -``` |
| 60 | +<br > |
61 | 61 |
|
62 | | -**Install dependencies** using pip |
| 62 | +> **Step 2** - Install dependencies via NPM or yarn |
63 | 63 |
|
64 | 64 | ```bash |
65 | | -$ pip install -r requirements.txt |
| 65 | +$ npm i |
| 66 | +// OR |
| 67 | +$ yarn |
66 | 68 | ``` |
67 | 69 |
|
68 | | -**Set up the environment** |
| 70 | +<br /> |
| 71 | + |
| 72 | +> **Step 3** - Start in development mode |
69 | 73 |
|
70 | 74 | ```bash |
71 | | -$ export FLASK_APP=run.py |
72 | | -$ export FLASK_ENV=development |
| 75 | +$ npm run start |
| 76 | +// OR |
| 77 | +$ yarn start |
73 | 78 | ``` |
74 | 79 |
|
75 | | -The API server will start using the default port `5000`. |
76 | | - |
77 | 80 | <br /> |
78 | 81 |
|
79 | | -## Start React UI |
| 82 | +At this point, the app is available in the browser `localhost:3000` (the default address). |
| 83 | + |
80 | 84 |
|
81 | | -To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository. |
| 85 | +<br /> |
82 | 86 |
|
83 | | -**Step #1** - Clone the project |
| 87 | +### 👉 Start the Backend Server |
| 88 | + |
| 89 | +> **Step 1** - Change the directory to `api-server-flask` |
84 | 90 |
|
85 | 91 | ```bash |
86 | | -$ git clone https://github.com/app-generator/react-datta-able-dashboard.git |
87 | | -$ cd react-datta-able-dashboard |
| 92 | +$ cd api-server-flask |
88 | 93 | ``` |
89 | 94 |
|
90 | 95 | <br > |
91 | 96 |
|
92 | | -**Step #2** - Install dependencies via NPM or yarn |
| 97 | +> **Step 2** - Install dependencies using a `virtual environment` |
93 | 98 |
|
94 | 99 | ```bash |
95 | | -$ npm i |
96 | | -// OR |
97 | | -$ yarn |
| 100 | +$ # Virtualenv modules installation (Unix based systems) |
| 101 | +$ virtualenv env |
| 102 | +$ source env/bin/activate |
| 103 | +$ |
| 104 | +$ # Virtualenv modules installation (Windows based systems) |
| 105 | +$ # virtualenv env |
| 106 | +$ # .\env\Scripts\activate |
| 107 | +$ |
| 108 | +$ pip install -r requirements.txt |
98 | 109 | ``` |
99 | 110 |
|
100 | 111 | <br /> |
101 | 112 |
|
102 | | -**Step #3** - Start in development mode |
| 113 | +> **Step 3** - Setup the `Flask` environment |
103 | 114 |
|
104 | 115 | ```bash |
105 | | -$ npm run start |
106 | | -// OR |
107 | | -$ yarn start |
| 116 | +$ export FLASK_APP=run.py |
| 117 | +$ export FLASK_ENV=development |
| 118 | +// OR |
| 119 | +$ (Windows CMD) set FLASK_APP=run.py |
| 120 | +$ (Windows CMD) set FLASK_ENV=development |
| 121 | +$ |
| 122 | +$ (Powershell) $env:FLASK_APP = ".\run.py" |
| 123 | +$ (Powershell) $env:FLASK_ENV = "development" |
108 | 124 | ``` |
109 | 125 |
|
110 | 126 | <br /> |
111 | 127 |
|
112 | | -## Configure the backend server |
| 128 | +> **Step 4** - Start the API server (development mode) |
| 129 | +
|
| 130 | +```bash |
| 131 | +$ flask run |
| 132 | +``` |
| 133 | + |
| 134 | +Use the API via `POSTMAN` or `Swagger Dashboard` at `localhost:5000`. |
113 | 135 |
|
114 | | -The product comes with a usable JWT Authentication flow that provides only the basic requests: login/logout/register. |
| 136 | +<br /> |
115 | 137 |
|
116 | | -**API Server URL** - `src/config/constant.js` |
| 138 | +## 👉 Codebase Structure |
117 | 139 |
|
118 | | -```javascript |
119 | | -const config = { |
120 | | - ... |
121 | | - API_SERVER: 'http://localhost:5000/api/' // <-- The magic line |
122 | | -}; |
| 140 | +```bash |
| 141 | +< ROOT > |
| 142 | + | |
| 143 | + api-server-flask/ |
| 144 | + ├── api |
| 145 | + │ ├── config.py |
| 146 | + │ ├── __init__.py |
| 147 | + │ ├── models.py |
| 148 | + │ └── routes.py |
| 149 | + ├── requirements.txt |
| 150 | + ├── run.py |
| 151 | + └── tests.py |
123 | 152 | ``` |
124 | 153 |
|
125 | 154 | <br /> |
126 | 155 |
|
127 | | -**API Server Descriptor** - POSTMAN Collection |
| 156 | +## [React Datta Able PRO](https://appseed.us/product/datta-able-pro/full-stack/) |
| 157 | + |
| 158 | +> For more components, pages and priority on support, feel free to take a look at this amazing starter: |
| 159 | +
|
| 160 | +Datta Able is a premium React Design now available for download as a full-stack app. Made of hundred of elements, designed blocks, and fully coded pages, Datta Able PRO is ready to help you create stunning websites and web apps. |
128 | 161 |
|
129 | | -The backend server uses an [Unified API defition](https://docs.appseed.us/boilerplate-code/api-server/api-unified-definition) maintained and actively supported by AppSeed across multiple frameworks: Flask, Node JS, FastAPI. |
| 162 | +- 👉 [React Datta Able PRO](https://appseed.us/product/datta-able-pro/full-stack/) - Product Page |
| 163 | + - ✅ `Enhanced UI` - more pages and components |
| 164 | + - ✅ `Priority` on support |
| 165 | + |
| 166 | +<br > |
130 | 167 |
|
131 | | -- [API POSTMAN Collection](https://github.com/app-generator/api-unified-definition/blob/main/api.postman_collection.json) - can be used to mock (simulate) the backend server or code a new one in your preferred framework. |
| 168 | + |
132 | 169 |
|
133 | 170 | <br /> |
134 | 171 |
|
135 | 172 | --- |
136 | | -[Flask React Datta Able](https://appseed.us/product/flask-react-datta-able) - Provided by [CodedThemes](https://codedthemes.com/) and **AppSeed [App Generator](https://appseed.us/app-generator)**. |
| 173 | +[Flask React Datta Able](https://appseed.us/product/datta-able/api-server-flask/react/) - Full-Stack Seed project generated by **[AppSeed](https://appseed.us/)**. |
0 commit comments