DEV Community: Emokor Steven

Setup Laravel 9 project with ReactJS

Emokor Steven — Tue, 05 Jul 2022 17:43:35 +0000

Ever since Laravel 9, a lot of new features and improvements have been included in Laravel. Furthermore, developer experience has been improved, especially with the introduction of Vite, a frontend asset bundler. Laravel was previously using webpack for years, and it did a very good job. Integrating React into Laravel 9 has changed a bit with Vite as the new frontend asset bundler. I wrote a previous article on how to integrate ReactJS into Laravel, but it works for Laravel 8.x and before, or anyone who is using webpack to compile the frontend. In this tutorial, we'll be covering how to do this with Laravel 9.

This tutorial is going to walk us through integrating ReactJS into Laravel from scratch. You could do this too using a starter kit.

Pre-requisites:

Composer
npm

Setting up the backend

We can do this either using the Laravel installer or use composer. We are going to use the Laravel installer. Type the following command in your terminal:

laravel new laravel-react

Let's get into our new project:

cd laravel-react

We are going to need InertiaJS to help us contain these two stacks in one project. We're installing it using composer. Think of inertia as the glue to stick our frontend stack to our backend stack. In your terminal, type:

composer require inertia/inertia-laravel

We now need a middleware that gives inertia the power in our project. In our terminal, type:

php artisan inertia:middleware

Head to the app/Http/ directory, then in the Kernel.php file, add the follwing line in the $middlewareGroups[] array, add this line in the web[] array:

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

We then need our routes to be recognized in the frontend, since we're not using blade, but javascript to render our frontend. So, we need a special package called ziggy that handles that for us. We are installing it via composer:

composer require tightenco/ziggy

Now, in the resources/views/ directory, let's create a new blade file app.blade.php which will be our entry-point for our application's UI, since it's a SPA (single-page application) that we're going to be creating. Type the following script:


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite('resources/js/app.jsx')
        @inertiaHead
    </head>

    <body>
        @inertia
    </body>
</html>

Notice the @vite() and @viteReactRefresh. These are telling our Laravel app that Vite is compiling our assets (CSS and JS files), and that we're going to be using JSX for our frontend. Note that we do not call the css file from the app.blade.php. But if you want to, you can just add the line @vite('resources/css/app.css'). Ideally, this should be in the resources/js/app.jsx file that we will create later in this tutorial.

Finally, let's create our route for our welcome page. Head to the routes/ directory and in the web.php, let's add the following line to make Laravel aware of the route to our welcome page:

Route::get('/', function () {
   return inertia('Welcome');
}

// other option (must add use Inertia\Inertia after namespace declaration at the top):

/*
Route::get('/', function () {
   return Inertia::render('Welcome');
}
*/

Note the other option commented out! Either one of them will work perfectly.

Setting up the frontend

We are using npm to install our frontend dependencies. The npm must be installed on your machine. Look at the NodeJS documentation. In your terminal, type the following command:

npm i @inertiajs/inertia @inertiajs/inertia-react jsconfig.json @inertiajs/progress

The above command will install inertia frontend dependencies, inertia progress bar for page loading and the jsconfig.json file that identifies our project that relies on javascript to render the frontend.

There's one sensitive issue. We have not yet installed react-dom. Inertia uses reactjs v17.0.2 as per the time of publishing this article. In order not to encounter errors, we need to specify the version of react-dom that will be compatible with our version of reactjs already installed:

npm i react-dom@17.0.2

We also need the vite plugin for react:

npm add @vitejs/plugin-react

Head to the resources/js/ directory, in the app.js file, add the following script below the import "./bootstrap" line, then rename the file to app.jsx:

import "../css/app.css";

import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

// you can specify any color of choice
InertiaProgress.init({ color: "#4B5563" });

Almost there! We need to tell Vite that we are using react, and specify our entry-point file. Laravel already installed for us a vite.config.js file. Let's head there, modify and add the following lines:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react"; //this line

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.jsx", //this line
        }),
        react(), //this line
    ],
});

Finally, let's create our welcome page. Let's create a new folder Pages and add a Welcome.jsx file in our resources/js/ directory:

export default function Welcome () {
    return (
        <>
            <div>Hello Inertia!</div>
        </>
    );
}

Then start your PHP server with the command:

php artisan serve

Then add a tab in your terminal and start the Vite dev server:

npm run dev

Done!

Conclusion

And that's pretty much it! It's a few more steps compared to the previous way of doing it. But, Vite is much better and provides a better developer experience. You can visit the Inertia documentation that explains more on the client-side setup and server-side setup.

Integrate ReactJS in Laravel

Emokor Steven — Thu, 28 Oct 2021 09:44:51 +0000

Now more than ever, it has become very easy to integrate React in your Laravel project, as opposed to before when one had to depend on APIs to connect the two stacks. This meant two different hosting environments and two Git repos to manage. But with InertiaJS we can build SPAs (single page apps) with your preferred front-end in one single project without need for APIs. Inertia has support for React, Vue or Svelte to use in your front-end. You pass data in your controllers as in any ordinary Laravel project, only difference is you're now rendering your views as JavaScript elements instead of blade. This can be done in two ways:

Using a starter kit like Laravel Breeze or Jetstream (which is a bit more tedious)
From scratch using npm and InertiaJS

In February 2021, Taylor Otwell (creator of Laravel) released InertiaJS version of Laravel Breeze. The Laravel documentation explains this in detail if you prefer using a starter kit.

However, in this short tutorial we will be focusing on option 2 which is creating the project from scratch using InertiaJS and npm. With Inertia, we shall have separate code bases but beautifully synced in one project. No need for APIs. Imagine Inertia as the glue between your front-end and your back-end.

Setting up the back-end

We need to first setup the back-end by creating a new laravel project and installing inertia using composer. You must have Laravel installed globally on your local machine, or you could just use composer to create a new Laravel project. Type the following command in your favourite terminal:

laravel new laravel-react

Now we need to get into the project:

cd laravel-react

We need to install inertia into our new project because inertia will do the job of helping our front-end speak to our back-end. You can refer to the InertiaJS documentation for more information:

composer require inertiajs/inertia-laravel

In your terminal, type the following command to create a middleware to power up inertia:

php artisan inertia:middleware

Then head to your app/Http/Kernel.php file and add the following in $middlewareGroups section, as the last line:

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

Now let's head to our project directory in resources/views/ and create a new file app.blade.php and paste the following code:

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

Finally, let us create the route for our welcome page. Go to routes/web.php and modify the route as below:

Route::get('/', function () {
   return inertia('Welcome');
}

or you could simply use return Inertia::render('Welcome') and include the line use Inertia\Inertia below the namespace declaration to add the inertia class in your web.php file.

And that's pretty much it for the back-end setup.

Setting up the front-end

We are using npm to install our front-end dependencies. So you need to have npm installed on your local machine to have it smooth. The NodeJS documentation explains this in detail. In your terminal, type the following command:

npm i @inertiajs/inertia @inertiajs/inertia-react react-dom jsconfig.json @inertiajs/progress

The above instructions install the inertia-react dependencies, react-dom that helps us use the react stack, the inertia progress-bar effect for our page loading and the jsconfig.json file that identifies our project as one that is going to use JavaScript to render our views.

Once the dependencies have been installed, we need to install another important dependency that will help us compile all our JavaScript files, including our app.js file as the react root:

npm i --save-dev @babel/preset-react

Create a .babelrc file in the root directory of our project and paste the following code:

{
    "presets": ["@babel/preset-react"]
}

Then go to resources/js/app.js and include the following code:

import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'
import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(<App {...props} />, el)
  },
})

Almost there. We then need to tell our webpack.mix.js file that we are using react in our project. So, let's include .react() in our mix.js() block of code:

mix.js('resources/js/app.js', 'public/js')
    .react() //* Include this
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

We need to create our welcome page. Go to your resources/js/ directory and create a folder named Pages. Inside the Pages folder, create a Welcome.jsx file and include the following code:

import React from 'react'

export default function Welcome () {
    return (
        <>
            <div>Hello Inertia!</div>
        </>
    );
}

Finally, run npm run dev or npm run watch in your terminal. When mix has finished running, then serve your Laravel project php artisan serve.
You should see "Hello Inertia" in your browser.

And that's pretty much it. Now, time to play!