How to create an app using laravel with inertiajs and react 2022

#webdev #react #laravel #inertia

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/




<!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.



'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:



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! *



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:

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:



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:



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:



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:



{
  "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
Inertiajs
reactjs