Настройка Laravel с React через Vite: пошаговое руководство
Интеграция Laravel в качестве бэкенда с React на фронте - популярный подход для создания SPA (Single Page Application). Однако при первой настройке разработчики часто сталкиваются с ошибкой 404 при запуске npm run dev. Разберём, как правильно сконфигурировать проект, чтобы Laravel и React работали вместе через Vite, и как избежать типичных проблем.
Почему возникает ошибка 404 при npm run dev?
Ошибка 404 на localhost:port означает, что Vite не может найти корневой файл для отдачи статики. В стандартной связке Laravel + Vite сервер разработки должен обслуживать ресурсы через Laravel (php artisan serve), а Vite используется только для сборки и hot-reload. Если вы запускаете только npm run dev, Vite запускает свой собственный сервер, но не знает о Laravel-роутах, поэтому отдаёт 404.
Как правильно настроить Laravel, React и Vite в одном проекте
Шаг 1: Установка Laravel и зависимостей
Выполните команды в терминале:
composer create-project laravel/laravel reactproj
cd reactproj
npm install
npm install react react-dom
npm i @vitejs/plugin-reactШаг 2: Конфигурация Vite
Отредактируйте vite.config.js. Важно: для интеграции с Laravel нужно использовать плагин laravel-vite-plugin. Без него Vite не будет знать, куда складывать собранные файлы и как связываться с Blade-шаблонами. Пример корректной конфигурации:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
react(),
],
});Шаг 3: Blade-шаблон с React
В файле resources/views/welcome.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 React SPA</title>
@viteReactRefresh
@vite(['resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>Шаг 4: React-компоненты
Создайте файл resources/js/app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';
ReactDOM.render(<Welcome />, document.getElementById('app'));И resources/js/Welcome.jsx:
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return (
<div>
<h1>Welcome to React</h1>
<p>React is a JavaScript library for building user interfaces.</p>
</div>
);
}
}
export default Welcome;Как запускать проект: обязателен ли php artisan serve?
Да, для разработки SPA на Laravel + React необходимо одновременно запускать два сервера:
- Laravel сервер -
php artisan serve(по умолчанию на порту 8000). Он обрабатывает роуты и отдаёт Blade-шаблон с подключёнными React-ресурсами. - Vite сервер -
npm run dev(порт 5173). Он обеспечивает hot-reload и сборку React-кода.
После запуска обоих серверов перейдите на http://localhost:8000 - Laravel отдаст страницу, а Vite подгрузит React-компоненты через ссылки в @vite(). Без php artisan serve Vite не сможет корректно обслуживать Laravel-роуты, поэтому 404 - ожидаемое поведение.
Как отлаживать React без сборки Laravel?
Если вам нужно отлаживать только React-фронт без запуска Laravel, можно настроить отдельный Vite-проект для React и проксировать API-запросы к Laravel. Однако в рамках единого проекта проще использовать описанную выше связку с двумя серверами. Для ускорения работы используйте php artisan serve --host=0.0.0.0 и настройте CORS в Laravel для приёма запросов с порта Vite.
Частые ошибки и их решение
Ошибка: Vite не видит плагин laravel-vite-plugin
Убедитесь, что плагин установлен: npm install laravel-vite-plugin --save-dev. Без него директива @vite() в Blade не будет работать.
Ошибка: React-компоненты не отображаются
Проверьте, что в vite.config.js указан правильный путь к точке входа: input: ['resources/js/app.js']. Также убедитесь, что в app.js используется ReactDOM.createRoot для React 18+.