Book a call
Table of Contents
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
Create a new file, app.blade.php in resources/views and paste the below code. This file will be loaded on the first page visit. This will be used to load your site assets (CSS and JavaScript), and will also contain a root <div> to boot your JavaScript application in.
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
Next, update your main JavaScript file app.js in resources/js/app.js. If you have existing app.js in that folder, rename the old file, create a new app.js, and write the below code in that file. What we're doing here is initializing the client-side framework with the base Inertia component.
Step 6 - Install babel plugins
Why do we need Babel? Code splitting breaks apart the various pages of your application into smaller bundles, which are then loaded on demand when visiting new pages. This can significantly reduce the size of the initial JavaScript bundle, improving the time first to render. To use code splitting with Inertia, you'll need to enable dynamic imports. That’s why you'll need a Babel plugin to make this work.
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.
Conclusion
That’s it.
Try to call the route project_url/test, and your inertia with React in Laravel integration is done.
Hope you found this article helpful.
Related Articles.
More from the engineering frontline.
Dive deep into our research and insights on design, development, and the impact of various trends to businesses.
Sep 12, 2024
Server Driven App For React, {Native}
Learn about Server Driven UI with Tarun from GeekyAnts. Discover its benefits, real-world applications, and key implementation considerations for dynamic app development.
Apr 25, 2024
Introducing the useDebounce Hook
Learn how to optimize your React applications with the useDebounce hook. This powerful tool simplifies debouncing, enhancing performance and user experience.
Apr 22, 2024
Understanding and Implementing the Custom React Hook for Network State Monitoring
This blog post delves into the implementation of a custom React hook named useNetworkState. Understand its functionality, purpose, and how to integrate it into your React applications for effective network state management.
Jan 29, 2024
Navigating Heights: Material Top Tabs and Gorhom Bottom Sheet with React Navigation
Our latest article explores how to streamline navigation using Material Top Tabs and elevate user experience with Gorhom Bottom Sheet.
Jun 8, 2023
Improving Performance with React.js
Himanshu Gupta, Software Developer at GE, recently spoke on Improving Performance with React.js at the React-Next.js Meetup. This blog post presents the key takeaways from his talk.
Mar 29, 2023
How to Create a 2D Game Using React Native Skia
This blog details the process of building a variation of the well-known two-dimensional game, Flappy Bird, using a novel framework named React Native Skia.