It started when I want to refreshing my skill on front end development with building something related with React but I kind of didn't want to build API-based backend then I was remember Inertiajs exists to solve that. I did several projects with Laravel + Inertiajs several years ago so it must be easy to setup.

Surprisingly though, it was hard.

I know, seems skill issue or because didn't use it for years. But at the end, I made it to become a starter kit for future self or maybe you who need it.

Want to jump directly to the code? Here we go

https://github.com/didikz/laravel-inertia-react-starter

Stacks

I want to be specific with React so the main stacks are:

• Laravel (v11)

• Inertiajs

• React

• Tailwindcss

• Vite

Including suplementaries:

• Tailwindui

• Eslint

• Heroicons

Learning Journey

Basically after I install Laravel, I was only following all the steps on the Inertiajs documentation regarding setup server side and setup client side for React, but it turned out like playing with puzzle to get fit one by one.

So here are the missing pieces in Vite and React setup. Assumed that inertiajs for server already been installed.

1. Install React dependencies

npm install react react-dom @inertiajs/react @vitejs/plugin-react

2. Change .js extension file to .jsx

3. In /resources/js/app.jsx change js extention to .jsx in page resolver. So it will look like this

    resolve: name => {
       const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true });
       return pages[`./Pages/${name}.jsx`];
    },
   

4. Go to vite.config.js and add plugin for react and laravel. Don't forget use .jsx extension becase I already changed that in the first place.

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

5. Create the Inertia root view file usually at /views/app.blade.php and include @vite directive. Once again change to .jsx extension on the js file.

6. It should be able to built and running the site but auto reload when I changed the script page it will got error.

   

7. The solution was simply add @viteReactRefresh directive before @vite in root Inertia file. It will inject some script that would allow us to hot reload when there is a change in our script.

    @viteReactRefresh
    @vite(['resources/js/app.jsx', 'resources/css/app.css'])
    @inertiaHead
   

8. That's it, the rest only need to create Pages and ready to go.

9. Running the service would be need two separate terminals

    # running the backend
    php artisan serve
   
    # Running the frontend
    npm run dev
   

Happy coding!