Skip to content

app-generator/react-datta-able-flask

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Datta Able frontend enhanced with JWT authentication powered by a simple Flask API backend. 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).

React Datta Able - Full-Stack Starter generated by AppSeed.


  • Modern aesthetics UI design - Designed by CodedThemes
  • React, Redux, Redux-persist

Tests (compatibility matrix)

NodeJS NPM YARN
v14.0.0
v16.0.0
v18.0.0

Flask API Features

  • Stack: Flask / Flask-RestX / SQLite
  • DB Layer: SqlAlchemyORM, SQLite persistence
  • Auth: JWT tokens managed via Flask-jwt_extended

How to use it

Being a full-stack product, the backend and the frontend should be compiled and started separately. Before starting to compile the product, make sure you have the following tools installed in the environment:

  • NodeJS - version 14.x or higher
  • GIT - used to clone tjhe sources from Github
  • Python3 - used in many tools

👉 Start the Frontend

Step 1 - Once the project is downloaded, change the directory to react-ui.

$ cd react-ui

Step 2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

Step 3 - Start in development mode

$ npm run start 
// OR
$ yarn start

At this point, the app is available in the browser localhost:3000 (the default address).


👉 Start the Backend Server

Step 1 - Change the directory to api-flask

$ cd api-flask

Step 2 - Install dependencies using a virtual environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ pip install -r requirements.txt

Step 3 - Setup the Flask environment

$ export FLASK_APP=run.py
$ export FLASK_ENV=development
// OR 
$ (Windows CMD) set FLASK_APP=run.py
$ (Windows CMD) set FLASK_ENV=development
$
$ (Powershell) $env:FLASK_APP = ".\run.py"
$ (Powershell) $env:FLASK_ENV = "development"

Step 4 - Start the API server (development mode)

$ flask run

Use the API via POSTMAN or Swagger Dashboard at localhost:5000.


👉 Codebase Structure

< ROOT  >
    |
   api-server-flask/
    ├── api
    │   ├── config.py
    │   ├── __init__.py
    │   ├── models.py
    │   └── routes.py
    ├── requirements.txt
    ├── run.py
    └── tests.py

The premium version provides more features, priority on support, and is more often updated - Live Demo.

  • Enhanced UI - more pages and components
  • JWT Authentication
  • Priority on support

React Datta Able PRO - Full-Stack Starter generated by AppSeed.



React Datta Able Django - Full-Stack Seed project generated by App Generator.