How to install react in Laravel 9 with Vite

How to install react in Laravel 9 with Vite

Posted by Luke Beeno on September 18, 2022

How to install react in Laravel 9 with Vite

How to install react in Laravel 9 with Vite

Posted by Luke Beeno on September 18, 2022

Here are some short instructions on how to install react in laravel 9 with the new Vite configuration.

Step 1. Install the Laravel UI package

This is an easier way to get react in Laravel.

run this command:

composer require laravel/ui

Step 2. Install React by running command

php artisan ui react

Step 3. Get all the packages

npm install

Step 4. Install vite react plugin

@vitejs/plugin-react

Once you have installed all the packages here is how you use react:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Wecode101 install react to Laravel 9</title>
    @viteReactRefresh
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div id="root"></div>
</body>
</html>