38
Laravel React - Purity Dashboard (Free Product)
Hello Coders!
This article presents an open-source full-stack seed project crafted in Laravel and React on top of a pixel-perfect
Chakra UI design: Purity Dashboard. The product can be downloaded and used directly from Github and the permissive license permits unlimited copies and usage for commercial products. For newcomers, Purity React is an innovative design crafted by Creative-Tim and Laravel is a leading web framework written in PHP. Thanks for reading! - Content provided by App Generator.
This open-source product can be used in a local environment by typing a few commands in the terminal window. Before trying to compile Laravel React Purity, make sure the workstation has a minimal programming kit to complete the task:
Once this minimal toolchain is properly installed and accessible in the terminal, we can proceed further and compile the product starting with the backend:
Step #1 - Download the product via GIT
$ git clone https://github.com/app-generator/laravel-react-purity-dashboard.gitThe 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
Compile and start the React UI
Optional) Change the API port exposed by Laravel CodebaseOptional) Configure the API port used by the React UI to communicate with the backendWith all the above steps completed, we should see the product running in the browser and being able to register new users, authenticate and interact with the UI.
$ 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.phpAt this point, the API should be up & running and we can test it using POSTMAN or
curl. 
$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn startThe React UI comes pre-configured to communicate with the backend using the port
5000 but we can easily change this via the configuration src/config/constant.js:const config = {
...
API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
};Once the backend and the frontend are both up & running, we should be able to register new users, authenticate and interact with this nice design.
React Laravel Purity Dashboard - Billing
React Laravel Purity Dashboard - RTL Support
Thanks for reading! For more resources please access:
38