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:

Including suplementaries:

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.

Install React dependencies

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

Change .js extension file to .jsx

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`];
 },

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,
         }),
     ],
 });

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.
It should be able to built and running the site but auto reload when I changed the script page it will got error.
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
```
That's it, the rest only need to create Pages and ready to go.

Running the service would be need two separate terminals

 # running the backend
 php artisan serve

 # Running the frontend
 npm run dev

Happy coding!

Simple Laravel Inertia React and Tailwindcss Starter Kit

Comments (1)

More from this blog

Implement Your Own Request Middleware for Go HTTP Server

How To Do Graceful Shutdown for Go HTTP Server

Unemployed #37 - End of Search and Incoming Offers

Building Simple Real-Time System Monitor using Go, HTMX, and Web Socket

Unemployed #10 - HTMX

Stacks

Learning Journey

Command Palette

Comments (1)

More from this blog

Stacks

Learning Journey