##### ✏️ Written by [Xander Van den Bossche](https://github.com/Xandervdb1) For the past month I have been working on a full-stack application together with co-learners at a bootcamp, all the way from coming up with the idea for a product to deploying it. When it came to deciding which technologies we would use to bring this project to a good end, the front-end team was set on using on **React** for quick rendering of a single-page application, while back-end wanted to work with **Laravel** so they could benefit from an easy-to-use relational database. None of us had ever worked in a stack that combined the both, but after some asking around we found our solution: **Inertia.js**. ## 🤔 What is Inertia.js? Inertia allows to combine both server-side rendering together with client-side rendering, with the use of routes and controllers which will render a single-page application using React pages and components. It isn't a framework like you might think, but rather acts like the **glue between your favorite server-side and client-side frameworks**, making them best friends. ![The office - Michael hugging Jim gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t51r9gperj4lr6i7w5e.gif) As found on the [Inertia website](https://inertiajs.com/): >Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith. > >Inertia allows you to create fully client-side rendered, single-page apps, without the complexity that comes with modern SPAs. It does this by leveraging existing server-side patterns that you already love. > >Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done! Inertia works great with any backend framework, but it's fine-tuned for Laravel. When we first read about this we thought we were in for a ride to learn about all the ins and outs of Inertia before we'd be able to use all of its benefits. I was in charge of researching the main differences from the regular frameworks, but was surprised by how easy-to-use and convenient it actually is to use Inertia. In this article I'll talk about how to set up a **Laravel - React app using the modern monolith**, and the important differences you'll need to know to become an Inertia pro. ## 🚀 Getting started with Inertia.js ### Before you dive in You'll need to make sure you have following: - [Node.js 10x](https://nodejs.org/en/download) or higher & [npm 5.2](https://docs.npmjs.com/getting-started) or higher - [PHP](https://www.php.net/manual/en/install.php) 7.2.5 or higher, [Composer](https://getcomposer.org/) and [Laravel](https://laravel.com/docs/6.x) - A basic knowledge of Laravel & React ### Lift off! 1. Creating a Laravel project in the current directory ``` composer create-project laravel/laravel . ``` 2. Add breeze (Laravel starterkit), to install React with it later ``` composer require laravel/breeze --dev ``` 3. Have breeze add React to your project (using Inertia.js) ``` php artisan breeze:install react ``` 4. Install and run vite & tailwind ``` npm i npm run dev ``` 5. Set up your database settings in .env ``` DB_CONNECTION=mysql DB_HOST={database host} DB_PORT={database port} DB_DATABASE={database name} DB_USERNAME={database username} DB_PASSWORD={database password} ``` 6. Migrate the database & start up the server ``` php artisan migrate php artisan serve ``` 7. Pat yourself on the back! 🎊 ![The office - dance party gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0623qms37y7fe3wzizkz.gif) ## How to use Inertia to the fullest Since Inertia will help you combine your favorite frameworks together, there'll be slight changes to how you would use them normally. I have listed most major changes below, but encourage going through the [documentation](https://inertiajs.com/) if you'd like the full list, since all of them are described there. ### 📄 Pages Just like views in Laravel, you'll have Pages (that you'll render with requests) which are located in the `resource/js/Pages/` directory as a .jsx file An example of what a basic page would look like: ```jsx //Index.jsx const Index = () => { return ( <>

Hello World - Index page

); } export default Index ``` ![Big bang theory - throwing papers around](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qab8pqwjbpzjffs5ejzc.gif) #### Rendering a page A page will be rendered by a route inside `routes/web.php`. There's two ways to render a page. Both ways, Inertia will go search for the page in the Pages directory by default, and look for `{name}.jsx` (just like using view() in Laravel). ```jsx //web.php //using the inertia() helper function Route::get('/', function () { return inertia('Index'); //resources/js/Pages/Index.jsx }); //or //using the Inertia object and render method use Inertia\Inertia; Route::get('/', function () { return Inertia::render('Index'); //resources/js/Pages/Index.jsx }); ``` #### Passing variables to a page It is possible to pass variables through to the Page in the same way as you can in Laravel. ```jsx //web.php Route::get('/', function () { return Inertia::render('Index', [ 'name' => 'Xander' ]); }); ``` The `name` variable can then be accessed inside the Page file using props as a parameter passed through inside the function, just like in React. ```jsx //Index.jsx const Index = (props) => { return ( <>

xandervdb1

Creating a full-stack application using Inertia.js

Join Our Newsletter. No Spam, Only the good stuff.