react-datta-able's Introduction

NodeJS React Datta Able

Full-Stack Seed project generated by React App Generator on top of Datta Able design from CodedThemes. 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).

👉 NodeJS React Datta Able - Product Page
👉 NodeJS React Datta Able - LIVE Demo

✨ `React` Datta Able

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`	❌	❌

✨ `NodeJS API` Features

Stack: NodeJS / Express / SQLite
TypeScript, Joy for validation
DB Layer: TypeORM, SQLite persistence
Auth: Passport / passport-jwt strategy
API Definition - the unified API structure implemented by this server

Tests (compatibility matrix)

NodeJS	NPM	YARN
`v18.0.0`	❌	✅
`v17.0.0`	❌	✅
`v16.13.0`	❌	✅
`v16.0.0`	❌	❌

✨ 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-server-nodejs

$ cd api-server-nodejs

Step 2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

Step 3 - Run the SQLite migration via TypeORM

$ npm run typeorm migration:run
// OR 
$ yarn typeorm migration:run

Step 4 - Start the API server (development mode)

$ npm run dev
// OR
$ yarn dev

The API server will start using the PORT specified in .env file (default 5000).

👉 Codebase Structure

< ROOT / src >
     | 
     |-- config/                              
     |    |-- config.ts             # Configuration       
     |    |-- passport.ts           # Define Passport Strategy             
     | 
     |-- migration/
     |    |-- some_migration.ts     # database migrations
     |
     |-- models/                              
     |    |-- activeSession.ts      # Sessions Model (Typeorm)              
     |    |-- user.ts               # User Model (Typeorm) 
     | 
     |-- routes/                              
     |    |-- users.ts              # Define Users API Routes
     | 
     | 
     |-- index.js                   # API Entry Point
     |-- .env                       # Specify the ENV variables
     |                        
     |-- ************************************************************************

👉 SQLite Path

The SQLite Path is set in .env, as SQLITE_PATH

👉 Database migration

Generate migration:

$ yarn typeorm migration:generate -n your_migration_name

run migration:

$ yarn typeorm migration:run

React Datta Able `PRO Version`

For more components, pages and priority on support, feel free to take a look at this amazing starter:

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.

👉 React Datta Able PRO - Product Page
- ✅ Enhanced UI - more pages and components
- ✅ Priority on support

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

react-datta-able's People

Contributors

Stargazers

Watchers

react-datta-able's Issues

non-serializable value detected in an action

Environment: Ubuntu 20.04, Node 17.01, NPM 8.1.0. (Also tested with same result on Node 12, 16 & 18 and NPM 9.2.0). Tried Chrome and Safari with same results.

index.js:1 A non-serializable value was detected in an action, in the path: register. Value: ƒ register(key) {
pStore.dispatch({
type: constants__WEBPACK_IMPORTED_MODULE_1["REGISTER"],
key: key
});
}

I get a module not found recompose error

this is the steps i did.

in folder A i cloned the django api.
then I cd into the folder.
I did pip install -r requirements.txt
I did python manage.py migrate and python manage.py runserver
then in another fold B i cloned the react datta.
i cd into the folder.
i did npm i -- force due to a ERR.
then did npm run start. i get the same error of cab't resolve recompose
in visual studio code i added the API_Server to the config.

Everytime I run npm start or yarn start i get a module not found error. here is image attached. sm0ke on discord was trying to assist.

app-generator / react-datta-able Goto Github PK

react-datta-able's Introduction

✨ React Datta Able

✨ NodeJS API Features