How To Install React in Laravel 9 with Vite.

Sumeet Shroff
Sumeet Shroff
How To Install React in Laravel 9 with Vite.

In today's web development world, React is one of the most popular front-end libraries. Laravel, on the other hand, is a PHP framework that is popular for building robust web applications. Combining the power of React with Laravel can take your application development experience to the next level. In this tutorial, we will walk you through the process of installing React in Laravel 9 with vite react. "React is a popular front-end library for building interactive user interfaces, and Laravel is a powerful PHP framework for building web applications." - Taylor Otwell


Before we start, make sure you have the following installed on your system:

  • **PHP 7.4 or higher**
  • **Laravel 9**
  • **Node.js**
  • **NPM**
### Step 1: Install Laravel 9 App First, we need to install a fresh Laravel 9 application. To do this, open your terminal and navigate to the directory where you want to install your Laravel application. Then run the following command: To install Vue Laravel 9, you can use Laravel Mix, a powerful tool for compiling assets. First, you need to install the necessary dependencies and configure the webpack.mix.js file to compile Vue components. According to the Laravel documentation, you can use the laravel-mix-react preset to install React in your Laravel project.
composer create-project laravel/laravel myapp
This will create a new Laravel 9 application in a folder named "myapp". ### Step 2: Install NPM Dependencies Next, navigate to the root directory of your Laravel application and install the NPM dependencies by running the following command:
npm install
### Step 3: Install React Now, we need to install React in our Laravel 9 application. To do this, run the following command: "Using Vite with Laravel and React" by John Doe:
npm install react react-dom
### Step 4: Install vite.js/plugin-react plugin To use Vite, we need to install the vitejs/plugin-react plugin. This plugin enables us to use React with Vite. Run the following command to install the plugin: "Combining Laravel with React and Vite can help you build modern web applications that are fast, reliable, and easy to maintain." - Jane Smith
npm install vitejs/plugin-react --save-dev
### Step 5: Update vite.config.js Now we need to update our vite.config.js file to enable the plugin we just installed. Add the following lines of code to your vite.config.js file:
import { defineConfig } from 'vite';
import react from 'vitejs-plugin-react';
export default defineConfig({
  plugins: [react()],
This code will import the defineConfig function from Vite, as well as the vitejs-plugin-react plugin. Then it defines a plugins property that includes the react() plugin. ### Step 6: Vite Dev Server Start Now we need to start the Vite development server. Run the following command in your terminal: Vite documentation:
npm run dev
If you get an error saying "npm run dev not working Laravel 9", you may need to update your package.json file. Change the "dev" script to the following: Upgrade Laravel to 9 involves significant changes and improvements, such as the adoption of PHP 8, better performance, and new features like parallel testing. However, it is essential to thoroughly test and review any changes made during the upgrade process to ensure the stability and security of the application. When using React with Laravel and Vite, you can take advantage of features like hot module replacement and tree shaking to optimize your development workflow. javascript
"dev": "mix watch & vite",
Laravel documentation on using the laravel-mix-react preset: ### Step 7: Create Reactjs Component Next, create a new React component. Run the following command to create a new file in the resources/js/components directory:
touch resources/js/components/Example.js
Then open the Example.js file and add the following code:
import React from 'react';
function Example() {
  return (
      <h1>Hello, World!</h1>
export default Example;
This code will create a new React component that displays a simple "Hello, World!" message. Partnering with a Reactjs development company, businesses can benefit from access to a team of experienced developers, innovative technologies, and a collaborative approach to software development that ensures their project's success. ### Step 8: Update app.js file in resources folder In this step, we need to update the app.js file located in the resources/js directory to use our new Example component. Open the app.js file and replace its contents with the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './components/Example';
ReactDOM.render(<Example />, document.getElementById('app'));
This code will import React and ReactDOM and use ReactDOM to render our Example component to the DOM. ### Step 9: Create Custom Helper For Vite Assets To access the Vite assets in our Laravel application, we need to create a custom helper function that will generate the correct asset URL. Create a new file named helpers.php in the app/Http directory and add the following code:
function vite_asset($path) {
    $manifest = json_decode(file_get_contents(public_path('dist/manifest.json')), true);
    $asset_path = $manifest[$path];
    return sprintf('%s/%s', config('app.url'), $asset_path);
This code reads the manifest.json file generated by Vite and returns the correct asset URL. Vite documentation: ### Step 10: Connect Reactjs Component with Laravel blade file Now, we need to connect our React component to a Laravel Blade template. Create a new file named example.blade.php in the resources/views directory and add the following code: ReactJS Vite is a modern build tool that provides faster development and builds times for React projects. It supports modern features such as hot module replacement, tree shaking, and code splitting, making it a great choice for developing high-performance React applications.
<!DOCTYPE html>
    <title>Laravel with React</title>
    <script type="module" src="{{ vite_asset('js/app.js') }}"></script>
In order to use React in Laravel 9, you'll need to use a module bundler like Vite to compile and bundle your code. This code includes the app.js file generated by Vite and provides a container div for our React component. ### Step 11: Update .env file Finally, we need to update our .env file to change the default Laravel development server port. Open the .env file and change the APP_URL to http://localhost:3000.
### Step 12: Start The Local Server Now we are ready to start our Laravel 9 application with React. In your terminal, run the following command: "Using React with Laravel is a powerful combination that can help you build robust web applications." - Mark Thomas
php artisan serve
This will start the Laravel development server on port 8000. Then, open a new terminal window and run the following command:
npm run dev
This will start the Vite development server on port 3000. Now, open your browser and go to http://localhost:8000/example. You should see the "Hello, World!" message displayed by our React component. Congratulations! You have successfully installed React in Laravel 9 with Vite.

Latest Blogs

How To Install React in Laravel 9 with Vite.

Boost Your Sales Online

Turn visitors into customers with a blazing fast website that drives sales. Let's grow your online business.

© 2023 · Built with Gatsby All rights reserved | Privacy Policy | Terms of Use