How to create an app using laravel with inertiajs and react 2022
Tags: webdev, react, laravel, inertia
Published: 2022-02-15 16:11:28

Many applications in the present, using by rule a separate schema of front and back. It's cool, but ¿What happens if need an app in a short time? May this be boring or exhausting, will create API,  later the app in the frontend. 
For this, laravel was incorporated many tools that allow creating a spa with technologies frontend like(vue, react,svelte). This blog tells how to do this with inertia.js.

The first to do is download laravel and all dependencies, as we already know. Later proceed to setup up inertiajs.

---


## Installation

**Server side**

Once downloaded laravel with  all dependencies, we go to the terminal in our project and we place:

`composer require inertiajs/inertia-laravel` 

Once downloaded all dependencies of inertia, but server side. Now, we go to a create our file app.blade.php in _resources/views/_

```php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>
```
_IMPORTANT_: **By default the Laravel adapter will use the app.blade.php view. This template should include your assets, as well as the @inertia directive. If you'd like to use a different root view, you can change it using Inertia::setRootView().**

Next, setup the Inertia middleware. In Laravel you need to publish the HandleInertiaRequests middleware to your application, which can be done using this artisan command:

`php artisan inertia:middleware`

Once generated, register the HandleInertiaRequests middleware in your App\Http\Kernel, as the last item in your web middleware group.

```php
'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],
```

**Client side**

Now, we go install all dependencies, but the client-side. This can to done using yarn or npm, the one you like, in the terminal, will write:

```javascript
npm install @inertiajs/inertia @inertiajs/inertia-react
yarn add @inertiajs/inertia @inertiajs/inertia-react
```

Later will initialize  app, we go to routes file _resources/js/app.js_ and **update** the file and will insert the code to below

_IMPORTANT_: **No delete nothing, only update! **

```javascript
import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(<App {...props} />, el)
  },
})
```
Next, will we go create a folder within name **Pages ** in our route files _resources/js_. Here, save all pages and subpages(components) of react. Example:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv1d4zeuj0lv21watlxx.png)
<u></u>
Optional can do install a progress indicator, this will allow to see a loaded or refresh page progress with color in the top page.
To use it, start by installing it:

```javascript
npm install @inertiajs/progress
yarn add @inertiajs/progress
```

Once it's been installed, initialize it in your app. Too in the file route _resources/js/app.js_:

```javascript
import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()
```

To use code splitting with Inertia you'll need to enable dynamic imports. You'll need a Babel plugin to make this work. First, install the plugin:

```javascript
npm install @babel/plugin-syntax-dynamic-import
yarn add @babel/plugin-syntax-dynamic-import
```
Next, create a .babelrc file in **your project root laravel** and insert this code:

```javascript
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
```

_IMPORTANT_: If you're using Laravel Mix, the dynamic imports Babel plugin is already configured. However, we recommend using Laravel Mix 6, as there are known issues with older versions.
 

And Done! 

You can start will build amazing things, with reactive tecnologies.

For more information remember check :
[Laravel](https://laravel.com/docs)
[Inertiajs](https://inertiajs.com/server-side-setup)
[reactjs](https://es.reactjs.org/)