DEV Community

Cover image for How to create an app using laravel with inertiajs and react 2022
Bryan Granado
Bryan Granado

Posted on • Updated on

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

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>


Enter fullscreen mode Exit fullscreen mode

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,
],


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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)
  },
})


Enter fullscreen mode Exit fullscreen mode

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

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


Enter fullscreen mode Exit fullscreen mode

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()


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Next, create a .babelrc file in your project root laravel and insert this code:



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


Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
amirkhasru123 profile image
amirkhasru123

Can you elaborate on making routes?