Vite With Laravel And React js | How To Install React In Laravel 9 With Vite | Install Reactjs In Laravel-Vite | Laravel Vite Preset | Laravel Vite And React js – Devduniya

Laravel has introduced the latest version of laravel 9.19 and It has a vite.config.js file instead of webpack.mix.js. In this post, we will learn how to install Reactjs in laravel 9.19 with vite. This post shows you how to install reactjs in laravel 9 with the latest upgrades. in laravel 9. Laravel 9.19 and the latest reactjs version powered by vite.

By the end of this post, you’ll be able to create a reactjs and Laravel 9.19 application powered by vite. We’ll also learn how to create a react component and connect it with the laravel 9 blade file.

Step 1: Install Laravel 9 App

Open your terminal and navigate where you want to install the laravel application. To install the latest version of the laravel framework you need to execute the following command. or you can run the “laravel new Laravel9ReactProject” command also.

composer create-project --prefer-dist laravel/laravel Laravel9ReactProject
or 
laravel new Laravel9ReactProject

Step 2: Install NPM Dependencies

After installing the project,navigate to the project folder for that run

cd Laravel9ReactProject

Now install npm in your project for that you need node and npm to be installed in your system. You can download latest version of nodejs by clicking this link.

npm install

Step 3: Install reactjs in laravel

Now after installing node modules we need to install reactjs in our application, for that execute the following command in the terminal npm install react@latest react-dom@latest. It will install latest version of reactjs and react-dom also. we’ll use it in jsx file.

npm install react@latest react-dom@latest

Step 4: Install vitejs/plugin-react plugin

In laravel 9 latest release install vitejs/plugin-react plugin for installing reactjs in laravel. This plugin provides reqired dependencies to run the reactjs application on vite. Vite is a  build command that bundles your code with Rollup and it runs on localhost:3000 port to give hot refresh feature.

npm i @vitejs/plugin-react

Step 4: Update vite.config.js file

The latest 9.19 Provides a vite.config.js file in the root of the application to configure front-end assets preset import plugin-react and add react() to the plugins array in the defineConfig() function.

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [
        react(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Step 4: Run Vite Dev Server

Now after installing the reactjs, we need to start the dev server for vite for that run the ‘npm run dev’ command and it will watch your resources/js/app.js file and resources/css/app.css file in your application. It also starts a vite server on http://localhost:3000. It will not open it in the browser as it is for vite hot reload and it runs in the background and watches the changes you made in the CSS and js file of your application.

npm run dev

Step 5: Create Reactjs Component

Under the resources/js folder create a file name Hello.jsx and write content for this example let’s write simple “Reactjs With Laravel Vite” you can change it according to your requirement. press ctrl + s to save the file.

// resources/js/Hello.jsx
import React from 'react';
import { createRoot } from 'react-dom/client'

export default function Hello(){
    return(
        <div>Reactjs With Laravel Vite</div>
    );
}

if(document.getElementById('Helloreact')){
    createRoot(document.getElementById('Helloreact')).render(<Hello />)
}

Step 6: Update app.js file in resources folder

In resources/js/app.js Import Hello.jsx component

// resources/js/app.js
import './bootstrap';

import './Hello.jsx'

Step 7: Connect Reactjs Component with Laravel blade file.

Now we need to create a blade file where the reactjs app will load. In the resources/views folder create a file name  react.blade.php. Add @vite(‘resources/js/app.js’) at the bottom of the file in the react.blade.php file It will load all the js you need to run the Reactjs code.

{{-- resources/views/react.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body class="antialiased">
        <div id="Helloreact"></div>

        <script type="module">
        import RefreshRuntime from "http://localhost:3000/@react-refresh"
        RefreshRuntime.injectIntoGlobalHook(window)
        window.$RefreshReg$ = () => {}
        window.$RefreshSig$ = () => (type) => type
        window.__vite_plugin_react_preamble_installed__ = true
        </script>

        @vite('resources/js/app.js')
    </body>
</html>

Step 8: Update Laravel Routes

Open routes/web.php and replace welcome.blade.php with react.blade.php file to load the react.blade.php file where our reactjs code will execute.

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('react');
});

Step 9: Update .env file

Open .env file and update APP_URL and set APP_URL=http://localhost:8000. It will help vite to check the js and CSS updates and changes them in the browser instantly.

APP_URL=http://localhost:8000

Step 10: Start the Local server

Start the development server

php artisan serve

and navigate to the following link http://localhost:8000/

Conclusion

I hope this article provides you with the necessary information about the latest laravel 9 and React to build your own app that uses Laravel 9,React and Vite.

If I forgot or missed something or any ideas for future posts on this topic or if you have any suggestions, let me know in the comments I’ll love to write a post about that.

I’d love to know!