Inertia ships with official server-side adapters for Laravel. In this article, we will install Inertia.js in Laravel with React.js.
First, we will perform server-side installation and then continue with the client-side installation.
Step 1 - Install the Inertia package in your Laravel project
Run the command below to install the Inertia package in your project via composer:
Step 2 - Add root template
Step 3 - Setup middleware
Next, setup the inertia middleware. Run the below command to do the same.
Once generated, register the HandleInertiaRequests middleware in your App\Http\Kernel, as the last item in your web middleware group.
Now, our server-side installation is done.
Next, we will perform the client-side installation.
Step 4 - Install client-side dependencies
Install the Inertia client-side adapters using NPM or Yarn.
Step 5 - Initialize app
Step 6 - Install babel plugins
Run the below commands to install the babel plugins:
Next, create a new file `.babelrc` in your project and add the following code.
Step 7 - Create a Test.js component
Now, create a new Test.js component in `resources/js/Pages` for testing if our integration is successful.
Step 8 - Make controller and route
To render the component, make TestController and add a new route in web.php.
Try to call the route project_url/test, and your inertia with React in Laravel integration is done.
Hope you found this article helpful.