A modern fullstack starter kit prepared for Docker-based development. Provides fast and consistent development environment by running Laravel and React technologies inside Docker containers.
- 🐳 Docker-Based Development - Consistent development environment
- Laravel 12 - Backend API and web framework
- React 19 - Modern frontend library
- Inertia.js - Laravel-React bridge for SPA-like experience
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Accessible UI components
- Vite - Fast build tool
- MySQL & Redis - Database and caching
- ESLint & Prettier - Code quality and formatting
- Dark/Light Mode - Theme support
- Hot Reload - Instant development feedback
Only these two tools are needed:
- Docker (20.10+)
- Docker Compose (2.0+)
💡 Note: You don't need to install tools like PHP, Node.js, Composer on your local machine! Everything runs inside Docker containers.
git clone https://github.com/muammertopcu/laravel-react-devkit cd laravel-react-devkit# Automatic installation and startup ./setup.sh🎉 That's it! The application is ready:
- Backend: http://localhost
- Frontend Dev Server: http://localhost:5173
- phpMyAdmin: http://localhost:8080 (Database management)
- Database: MySQL (localhost:3306) - For app connection only
- Redis: localhost:6379 - For app connection only
# Start containers docker-compose up -d # Frontend development server (with hot reload) docker-compose exec app npm run dev # Backend development server docker-compose exec app php artisan serve --host=0.0.0.0 # Watch code changes in new terminal docker-compose logs -f app# Start all services docker-compose up -d # Start specific service docker-compose up -d app # Stop containers docker-compose down # Rebuild containers docker-compose up -d --build # View container logs docker-compose logs -f app# Open bash inside container docker-compose exec app bash # Composer commands docker-compose exec app composer install docker-compose exec app composer require package-name # NPM commands docker-compose exec app npm install docker-compose exec app npm run dev docker-compose exec app npm run build # Laravel Artisan commands docker-compose exec app php artisan migrate docker-compose exec app php artisan make:controller ControllerName docker-compose exec app php artisan queue:work # Database operations docker-compose exec app php artisan migrate:fresh --seed docker-compose exec db mysql -u root -p laravel_db# Clean all containers docker-compose down -v docker system prune -a # For frontend hot reload docker-compose exec app npm run dev -- --host 0.0.0.0├── app/ # Laravel application code │ ├── Http/Controllers/ # API and web controllers │ ├── Models/ # Eloquent models │ └── Providers/ # Service providers ├── resources/ │ ├── js/ # React components and TypeScript code │ │ ├── components/ # Reusable components │ │ ├── pages/ # Inertia pages │ │ ├── layouts/ # Page layouts │ │ ├── hooks/ # Custom React hooks │ │ └── types/ # TypeScript type definitions │ ├── css/ # Tailwind CSS and style files │ └── views/ # Blade templates ├── routes/ # Route definitions ├── database/ # Migrations and seeders ├── tests/ # Unit and feature tests └── docker/ # Docker configuration files # 1. Start the project docker-compose up -d # 2. Start frontend development server (hot reload) docker-compose exec app npm run dev # 3. Watch backend in separate terminal docker-compose logs -f app # 4. Code quality check docker-compose exec app npm run lint docker-compose exec app ./vendor/bin/pint # 5. Run tests docker-compose exec app php artisan test# Create migration docker-compose exec app php artisan make:migration create_posts_table # Create model docker-compose exec app php artisan make:model Post # Create controller docker-compose exec app php artisan make:controller PostController # Create React component (manually) # resources/js/components/Post.tsx # Run migration docker-compose exec app php artisan migrate # Test frontend build docker-compose exec app npm run build# Run migrations docker-compose exec app php artisan migrate # Reset database and seed docker-compose exec app php artisan migrate:fresh --seed # Connect to MySQL shell docker-compose exec db mysql -u laravel -p laravel_db # Use phpMyAdmin (Web interface) # http://localhost:8080 # Username: laravel # Password: laravel # Database backup docker-compose exec db mysqldump -u laravel -p laravel_db > backup.sqlWeb-Based:
- phpMyAdmin: http://localhost:8080 (MySQL management)
Terminal/CLI-Based:
# MySQL CLI docker-compose exec db mysql -u laravel -p # Redis CLI docker-compose exec redis redis-cli # Laravel Tinker (for Eloquent testing) docker-compose exec app php artisan tinkerDesktop Clients (Optional):
- MySQL: TablePlus, Sequel Pro, MySQL Workbench
- Redis: RedisInsight, Medis
- Connection: localhost:3306 (MySQL), localhost:6379 (Redis)
The project includes modern and accessible UI components using Radix UI and Tailwind CSS:
- Avatar
- Button
- Checkbox
- Dialog
- Dropdown Menu
- Navigation Menu
- Select
- Tooltip
- Toggle
- and more...
The project comes with automatic dark/light mode support. The theme system stores user preferences using localStorage and follows the system theme.
This project uses Inertia.js to provide a seamless connection between Laravel backend and React frontend. This enables:
- SPA-like user experience
- Server-side routing
- Shared data management
- Automatic CSRF protection
# Build production image docker build -t laravel-react-app . # Run production container docker run -d -p 80:80 laravel-react-app # Production with Docker Compose docker-compose -f docker-compose.prod.yml up -dIf you want to deploy without using Docker:
# Production dependencies composer install --optimize-autoloader --no-dev # Frontend production build npm run build # Laravel optimizations php artisan config:cache php artisan route:cache php artisan view:cache # Permissions chmod -R 775 storage bootstrap/cache chown -R www-data:www-data storage bootstrap/cache# Laravel unit/feature tests docker-compose exec app php artisan test # Specific test file docker-compose exec app php artisan test tests/Feature/DashboardTest.php # Test with coverage docker-compose exec app php artisan test --coverage # Frontend tests (if you add them) docker-compose exec app npm run test # Browser container for E2E tests docker-compose -f docker-compose.test.yml up -dFor API endpoints and usage examples, you can examine the files in the /routes folder:
web.php- Web routesauth.php- Authentication routessettings.php- Settings routes
- Fork this repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push your branch (
git push origin feature/amazing-feature) - Create a Pull Request
Container won't start:
# Check container status docker-compose ps # View detailed logs docker-compose logs app # Rebuild container docker-compose down docker-compose up -d --buildPort conflicts:
# Check ports in use lsof -i :8000 lsof -i :3000 # Change ports in docker-compose.yml ports: - "8001:8000" # Use 8001 instead of 8000Database connection issues:
# Make sure MySQL container is running docker-compose ps db # Test database container connection docker-compose exec app php artisan tinker # >>> DB::connection()->getPdo(); # Connect directly to MySQL (terminal) docker-compose exec db mysql -u laravel -p # Use phpMyAdmin for web interface # http://localhost:8080Can't access MySQL/Redis ports from browser:
💡 Note: MySQL (3306) and Redis (6379) ports are database connection ports, not web interfaces!
- For database management: http://localhost:8080 (phpMyAdmin)
- MySQL connection: Only from within the application or database clients
- Redis connection: Only from within the application or Redis clients
Frontend hot reload not working:
# Run Vite dev server with correct settings docker-compose exec app npm run dev -- --host 0.0.0.0 --port 3000 # Use localhost:3000 in browser# Use bind mounts instead of Docker volumes (for development) # Keep Composer cache on host volumes: - ~/.composer:/tmp/composer # Mount node modules as volume volumes: - node_modules:/var/www/node_modules- Memory error: Increase memory limit in Docker Desktop (4GB+)
- Permission error: Set user IDs inside container
- Hot reload not working: Check host setting in Vite config
# All container logs docker-compose logs -f # Specific container logs docker-compose logs -f app # Laravel application logs docker-compose exec app tail -f storage/logs/laravel.log # Nginx logs (if using) docker-compose logs -f nginxThis project is licensed under the MIT License. See the LICENSE file for details.
This project uses the following open source projects:
This project is designed as a template for your new Laravel + React projects:
git clone <this-repo-url> new-project-name cd new-project-name rm -rf .git git init# Change project name in composer.json # Update project information in package.json # Edit .env.example according to your project./setup.shgit add . git commit -m "Initial commit from Laravel React Starter Kit" git remote add origin <new-repo-url> git push -u origin main💡 Tip: During development, you only need to use docker-compose up -d and docker-compose exec app npm run dev commands!