# Simple Laravel Inertia React and Tailwindcss Starter Kit

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](https://inertiajs.com) 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**](https://github.com/didikz/laravel-inertia-react-starter)

# Stacks

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

* [Laravel (v11)](https://laravel.com)
    
* [Inertiajs](https://inertiajs.com)
    
* [React](https://react.dev)
    
* [Tailwindcss](https://tailwindcss.com)
    
* [Vite](https://vitejs.dev)
    

Including suplementaries:

* [Tailwindui](https://tailwindui.com)
    
* [Eslint](https://eslint.org)
    
* [Heroicons](https://heroicons.com/)
    

# 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
    

```bash
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
    
    ```javascript
    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.
    
    ```javascript
    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.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725290774833/6ae9ec1a-017c-4c67-9730-25493e0d8231.png align="center")
    
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.
    
    ```javascript
    @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
    
    ```bash
    # running the backend
    php artisan serve
    
    # Running the frontend
    npm run dev
    ```
    

Happy coding!