Собственно сабдж, хочу использовать Laravel как бэк и на фронте реакт - для SPA. Т.е. laravel просто отдаёт всю статику по одному роуту от реакта, а дальше всё происходит на фронте, иногда только подгружая данные уже через fetch -> API Laravel.
По сути в IDE (phpstorm) нужна чисто отладка фронта т.е. react без сборки laravel и тд. Сборщик у меня Vite.
Порядок который я пробовал исходя из тутроиалов:
Terminalcomposer create-project laravel/laravel reactproj
cd reactproj
npm install
npm install react react-dom
npm i @vitejs/plugin-react
Меняю Welcome Blade содержание на такое:
Welcome Blade<!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>
@vitereactrefresh
@vite(['resources/js/app.js']);
<body>
<div id="app"></div>
</body>
</html>
app.jsimport React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';
ReactDOM.render(<Welcome />, document.getElementById('app'));
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
Меняю vite config
vite.config.jsimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react(),
],
});
После этого пробую запускать
npm run dev
Но по ссылке локалхост:порт висит 404 ошибка.
Подскажите, что не так и как собирать проект без сборки laravel или в любом случае придется собирать laravel на рабочем пк через
php artisan serve?! Первый раз пытаюсь совместить все в один проект, но пока не получается. Буду рад если кто подскажет что не так сделал и где нужно исправить или что то добавить?!
Средний