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
- Innovative Chakra UI Design - Creafted by Creative-Tim
- React, Redux, Redux-persist
- Authentication: JWT Login/Register/Logout
- Full-stack ready using Laravel API Server (open-source project)
- Simple, intuitive codebase - can be extended with ease.
- Stack: PHP 7.4 / Laravel 8 / Doctrine
- Authentication via JWT Auth a dedicated library for Laravel and Lumen
Links
- React Laravel Purity Dashboard - product page
- React Laravel Purity Dashboard - LIVE Demo
- LIVE Support via Discord - provided by AppSeed
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- be default the server starts on port
5000
- be default the server starts on port
Compile and start
the React UI- UI will start on port
3000
and expects a running backend on port5000
- UI will start on port
Configuration
(Optional)- Change the API port
- Configure the API port used by the React UI to communicate with the backend
$ 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:8000/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
- Ask for Support on Discord
- See for React Starters - index provided by AppSeed
React Laravel Purity Dashboard - Open-source full-stack seed project provided by AppSeed App Generator