React Laravel - Purity Dashboard (Open-Source) | AppSeed
OTHER License
Open-source full-stack seed project that uses a React UI
powered by a simple Laravel API Server
. Laravel React Purity sample can be used to bootstrap fast a new project using a tested development-ready
stack or simply for eLearning purposes by beginners. For newcomers, React is a popular Javascript library for coding user interfaces baked by Facebook and Laravel is a leading web framework written in PHP.
Features
Links
The product is built using a two-tier
pattern where the React frontend is decoupled logically and physically from the API backend. In order to use the product in a local environment, a few simple steps are required:
Compile and start
the Laravel API Backend
5000
Compile and start
the React UI
3000
and expects a running backend on port 5000
Configuration
(Optional)
$ cd laravel-api
$
$ # Install Modules
$ composer install
$ cp .env.example .env
$ php artisan key:generate
$
$ # Generate a `secret` key used by JWT Authentication Flow
$ php artisan jwt:secret
$
$ # Set up the database
$ touch database/database.sqlite
$ php artisan migrate
$
$ # Start the server
$ php -S localhost:5000 server.php
To have a successful compilation of this product, make sure you have the following PHP extensions installed and enabled:
php-xml
- required by Php-Unitphp7.4-sqlite
- The SQLite driver required by Laravel ORM$ # Php XML - required by Php Unit
$ sudo apt install php-xml php-cli php-mbstring php7.4-sqlite
$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start
Change the port exposed by the Laravel API
$ php -S localhost:5001 server.php
Now, the API can be accessed on port 5001
Update the API port used by the React Frontend
API Server URL - src/config/constant.js
const config = {
...
API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
};
For a fast set up, use this POSTMAN file: api_sample
Register -
api/users/register
(POST request)
POST api/users/register
Content-Type: application/json
{
"username":"test",
"password":"pass",
"email":"[email protected]"
}
Login -
api/users/login
(POST request)
POST /api/users/login
Content-Type: application/json
{
"password":"pass",
"email":"[email protected]"
}
Logout -
api/users/logout
(POST request)
POST api/users/logout
Content-Type: application/json
authorization: JWT_TOKEN (returned by Login request)
{
"token":"JWT_TOKEN"
}
React Laravel Purity Dashboard - User
React Laravel Purity Dashboard - Billing
React Laravel Purity Dashboard - RTL Support
React Laravel Purity Dashboard - Open-source Seed Project provided by AppSeed App Generator