Laravel 12 Setup with React Starter Kit

 Laravel 12 Setup with React Starter Kit

Laravel 12, released on February 24, 2025, introduces new starter kits to streamline the development process, including a robust integration with React.

Laravel News

These starter kits come pre-configured with essential tools and libraries, allowing developers to focus on building applications without the hassle of initial setup.

Key Features of the Laravel 12 React Starter Kit:

• Inertia.js 2: Facilitates seamless server-side routing and controllers, enabling a modern single-page application experience without the complexity of a traditional SPA.

• React 19: The latest version of React ensures optimal performance and access to new features.

• Tailwind CSS 4: A utility-first CSS framework that offers a highly customizable design system.

• shadcn/ui: A collection of accessible and customizable components built on top of Tailwind CSS.

  Laravel

Setting Up a New Laravel 12 Project with the React Starter Kit:

1. Install Composer: Ensure you have Composer installed on your system. If not, download and install it from the official Composer website.

2. Install the Laravel Installer: Open your terminal and run:

   composer global require laravel/installer
   

   Make sure to add Composer's global vendor bin directory to your system's PATH to access the laravel command globally.

3. Create a New Laravel Project: Use the Laravel installer to create a new project:

   laravel new my-react-app
   

   Replace my-react-app with your desired project name.

4. Navigate to the Project Directory:

   cd my-react-app
   

5. Install the React Starter Kit: Run the following Artisan command to install the React starter kit:

   php artisan starter-kit:install react
   

   This command will set up the React frontend within your Laravel application.

6. Install JavaScript Dependencies: Use npm to install the necessary packages:

   npm install
   

7. Build the Frontend Assets: Compile the frontend assets using Vite:

   npm run dev
   

   For production builds, use:

   npm run build
   

8. Start the Development Server: Launch Laravel's development server:

   php artisan serve
   

   Your application should now be accessible at http://127.0.0.1:8000.

Project Structure Overview:

After setting up a new Laravel project with the React Starter Kit, your project's directory structure will include both the standard Laravel directories and additional folders specific to the React frontend. Here's a breakdown of the key directories and their purposes:

my-react-app/
├── app/                # Backend application logic
├── bootstrap/          # Framework bootstrap files
├── config/             # Configuration files
├── database/           # Database migrations and seeders
├── public/             # Publicly accessible files
├── resources/
│   ├── js/             # React frontend code
│   │   ├── components/ # Reusable React components
│   │   ├── hooks/      # Custom React hooks
│   │   ├── layouts/    # Layout components
│   │   ├── lib/        # Utility functions and configurations
│   │   ├── pages/      # Page-level components
│   │   └── types/      # TypeScript type definitions
│   └── views/          # Blade templates (if any)
├── routes/             # Application routes
├── storage/            # Storage for logs and uploads
├── tests/              # Automated tests
├── vendor/             # Composer dependencies
├── package.json        # Node.js dependencies and scripts
├── vite.config.js      # Vite configuration file
└── webpack.mix.js      # Laravel Mix configuration file (if used)

Detailed Breakdown:

• resources/js/: This directory houses all the React frontend code. The structure is organized to promote scalability and maintainability:

  • components/: Contains reusable React components that can be utilized across various parts of the application.

  • hooks/: Holds custom React hooks to encapsulate and share logic between components.

  • layouts/: Includes layout components that define the structure of different pages or sections.

  • lib/: Stores utility functions, context providers, and configuration settings that support the frontend.

  • pages/: Contains page-level components corresponding to different routes in the application.

  • types/: Holds TypeScript type definitions to ensure type safety and enhance code quality.

This organized structure ensures a clear separation of concerns, making it easier to manage and scale your application.

Customization and Further Development:

The Laravel 12 React starter kit is designed to be fully customizable. All backend and frontend code resides within your application, giving you complete control over your project's structure and design. Utilizing Inertia.js allows you to build modern, single-page React applications using classic server-side routing and controllers, combining the power of React with Laravel's backend capabilities.

GitHub

For more detailed information and advanced customization options, refer to the official Laravel documentation on starter kits.

Following these steps, you can efficiently set up a new Laravel 12 project with the React starter kit, providing a solid foundation for your web application development.