Configure React & Laravel scaffolding using Vite

To build a modern web application backend, Laravel got an unbeatable position at the current time. Developers use SPA technologies like React, Vue, and others to scaffold with Laravel to the building admin panel and many more essential system parts. However, years back, Laravel provided Webpack.js to bundle the FrontEnd parts. But now they have replaced it with Vite, which is more convenient. Let's know how you can scaffold React with Laravel by using Vite.

What is Vite?

Vite.Js is nothing without a modern application frontend building tool. This comes with far fast development platform, and it can bundle the code (frontend SPA part like React, Vue, and others) and bring it to production.

Configuring Laravel and React with Vite

Step 1: Making a Laravel fresh application

This is the so far, so easy part. Just install a new Laravel project by hitting:

composer create-project laravel/laravel myapp

Step 2: Install all required dependency

After completing the fresh Laravel app installation, you need to install some more dependencies. It will make the project ready for scaffolding. First of all, move to the project folder from the CLI

Cd myapp

And then hit all those commands on the CLI one by one

composer require laravel/ui

php artisan ui react

npm install

npm run dev

Step 3: configure the blade

This is the time to make a new blade file. Or you can use the existing welcome.blade.php file to configure it properly. Go to the welcome blade file and replace it with the code below

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 9 vite with react</title>
    @viteReactRefresh
    @vite('resources/js/app.jsx')
</head>
<body>
<div id="app"></div>
</body>
</html>

Step 4: configure the app.js

Now go to the resource>js>app.js file. Now rename the app.js file by app.jsx and replace all existing code with the code from below

import './bootstrap';
import '../css/app.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
if (document.getElementById('app')) {
    const Index = ReactDOM.createRoot(document.getElementById("app"));
    Index.render(
        <React.StrictMode>
            hello World
        </React.StrictMode>
    )
}

Step 5: Configure the Vite

We are almost close to the end of the process. Now go to the Vite.config.js from the root directory of the project. And replace all the code with the code below

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.jsx',
            ],
            refresh: true,
        }),
        react(),
    ],
});

Finally, now, Restart the server, and now this is ready to develop. You can check the change from the Localhost:8000 port.

Caution: By default, Vite does not support Component.js extension. The extension should be in .jsx

So those are the easy process that you can follow to configure the Vite to React and Laravel Scaffolding.