This is a scaffolding project that comes with authentication & users CRUD. It is a Single Page Application (SPA) built on top of React.js in the frontend & Laravel in the backend.
- Progressive Web App (PWA)
- Supports multiple locales
- Stateless authentication system
- Datatables with server-side pagination, sorting & dynamic filtering
- Undo common actions
- Docker ready
- Image Intervention integration for image uploads
You can check out the live preview
- Clone the repo
git clone https://github.com/palonponjovertlota/laravel-react-admin.git. - Go to your project folder from your terminal.
- Run:
composer installandnpm installto install application dependencies. - Copy the
env.examplefile into a.envfile and then configure based on your local setup. - Installation is done, you can now run:
php artisan servethennpm run watch. - The project will run in this URL: (http://localhost:3000).
If you prefer Docker, there is a working setup provided to get you started in no time. Check your local setup to make sure that running this app in docker will work correctly:
If you are a Linux / Mac user, make sure to give the application proper file permissions. The php-fpm image uses www-data as its default user:
cd ~/your_projects_folder
sudo chown ${USER}:www-data -R laravel-react-admin
Make sure that the address 127.0.0.1:80 usually localhost is available on the host machine. It must be assured that apache2, nginx or any http webserver out there is not running on the host machine to avoid address and port collision.
To make this app run on docker you must add a custom host address pointing to localhost or 127.0.0.1.
A nginx.conf.example file is included inside .docker/webserver to help you in configuring a virtual host according to your host setup. It is better to just rename it to nginx.conf to avoid the file being included in your version control system. Nginx will automatically pick up every changes to this configuration file because it is bind-mounted into its container.
You can now run the image using the docker-compose up and optionally pass the --build flag if you intend to build the image. The app can be visited here http:your_custom_host_address.
In development, do note that all files inside this app is bind-mounted into the container, docker will just use the existing directories, in our concern the vendor and node_modules. Here is an example of running a composer install command: docker container exec -it laravel-react-admin-php-fpm composer install --no-interaction --no-plugins --no-scripts.
You can run any artisan commands directly into the laravel-react-admin-php-fpm container. Here is an example of a migration command: docker container exec -it laravel-react-admin-php-fpm php artisan migrate:fresh --seed.
As we are bundling frontend assets with webpack under the hood, you must specify the custom host address where the application runs in docker so that webpack can proxy that to be able to develop using docker. You can pass a --env.proxy flag when running for example the npm run watch command: npm run watch -- --env.proxy=http:your_custom_host_address.
Without open source, this project will not come this far. Below are the list of technologies that the project uses:
The application use it as its backend framework.
The application use it as its frontend framework.
The application uses it in bundling up different assets such as JavaScript, Sass, images, fonts and more.
The frontend of the application is designed using this UI kit.
Used in deploying the application in multiple environments (development and production).
Used as the application's http webserver both in development & production.
- @reeshkeed for designing the logo & design ideas.