Prerequisites
Basic understanding of web development
Working knowledge of Laravel
Node.js and NPM Installed
Composer installed
Basic understanding of React
A development environment set up
Before we begin, make sure you have Laravel 12 installed on your system, as this guide assumes you're working with the latest version of the framework
Introduction
In today's web development landscape, building modern, dynamic applications often requires combining powerful technologies. One popular combination is using React for the front-end and Laravel for the back-end. React's component-based architecture makes it easy to build interactive user interfaces, while Laravel provides a robust, scalable foundation for server-side logic.
In this guide, we'll walk you through the process of integrating React into your Laravel project, enabling you to harness the best of both worlds. Whether you're new to either technology or just looking to streamline your workflow, this step-by-step guide will show you how to set up and configure React with Laravel, so you can start building efficient, real-time applications with ease.
Let's dive in and get your React and Laravel project up and running!
Why VS Code is the Best Choice for Local React and Laravel Development
For local development of React and Laravel applications, I highly recommend using Visual Studio Code (VS Code) as your code editor. VS Code offers a powerful and customizable environment with essential features like IntelliSense, debugging tools, and a vast library of extensions that streamline development for both React and Laravel projects. With features like Git integration, syntax highlighting, and built-in terminal support, it enhances productivity and makes managing both frontend and backend code easier.
Create a New Laravel Project
If you haven't already created a Laravel project, start by creating one
composer create-project --prefer-dist laravel/laravel my-laravel-react-app
cd my-laravel-react-app
Install React and Vite Plugin for React
Now, install the necessary dependencies for React and Vite
npm install react react-dom
npm install @vitejs/plugin-react --save-dev
If node_modules doesn't exist yet, npm will create it in the root directory. If the folder already exists, it will just add the new packages to the existing node_modules.
Configure Vite for React
Next, modify the vite.config.js to enable React support. If you created the Laravel project with Vite, the vite.config.js file should already be in place.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin'; // Laravel plugin
import tailwindcss from '@tailwindcss/vite'; // TailwindCSS plugin
import react from '@vitejs/plugin-react'; // React plugin
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.jsx'], // React entry point
refresh: true, // enables live reloading during dev mode
}),
tailwindcss(),
react(), // Add the React plugin here
],
});
Update Your Blade Template
Next, let's update your main Blade template to include the Vite scripts. Open resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel React with Vite</title>
@viteReactRefresh
@vite('resources/js/app.jsx') <!-- Add this line to load React -->
</head>
<body>
<div id="app"></div> <!-- React will render here -->
</body>
</html>
By adding @viteReactRefresh before @vite('resources/js/app.jsx'), you ensure that:
- The necessary preamble for HMR is included, allowing Vite to correctly detect and apply changes to your React components during development.
Create Your React Component
Now, let's create a basic React component. Create a new file resources/js/app.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
// Define your main App component
function App() {
return <h1>Hello from React in Laravel with Vite!</h1>;
}
// Render the App component inside the 'app' div in your HTML
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);
Run the Development Server
To start the development environment, run the following command
npm run dev
This will start Vite's development server and watch for any changes in your frontend files.
Why Laravel is Looking for manifest.json
When you use the Laravel Vite plugin, it looks for the manifest.json file to dynamically load the compiled assets (JavaScript and CSS). This is the behavior in production mode, but it's also sometimes mistakenly expected during development.
Why Running npm run build Fixes It
When you run npm run build, Vite creates a manifest.json file in the public/build directory. This allows Laravel to correctly link to the build assets in the production environment or even when Laravel is looking for the manifest.json file during local development.
Serve Your Laravel App
To serve your Laravel app in a local environment
php artisan serve
You should now be able to visit http://localhost:8000 in your browser, and you should see your React component rendered within the Laravel app.
Final Thoughts
Integrating React into your Laravel project can significantly enhance your application's frontend while maintaining the robust backend features Laravel offers. By following the steps in this guide, you can easily set up a seamless connection between React and Laravel, creating a powerful full-stack application. With React handling dynamic UI updates and Laravel managing data and server-side logic, this integration allows you to build scalable, modern web applications with ease. Keep exploring and refining your setup, and you'll soon be building efficient and interactive apps that provide great user experiences.