Уже долгое время занимаюсь рефакторингом одного из своих проектов, который когда-то был написан на AngularJS 1.4. Серверную часть я делал на PHP фреймворке - Laravel.
Сейчас этот проект решил переписать на ReactJS, сделав его полность SPA. До этого, была связка View от Laravel с шаблонизатором от AngularJS. Серверная теперь просто RESTful API.
При связке Laravel с ReactJS, возникает вопрос: "Как правильно билдить приложение на ReactJS и подключить к Laravel?". Всё очень просто!
laravel new projectname
)create-react-app frontend
) (название папки на ваш выбор).npm run eject
для того, чтобы настроить конфигурации проекта по нашему желанию.frontend/config/paths.js
.1// config after eject: we're in ./config/ 2module.exports = { 3 dotenv: resolveApp('.env'), 4 appBuild: resolveApp('build'), // <- меняем на "../public/build" 5 appPublic: resolveApp('public'), 6 appHtml: resolveApp('public/index.html'), 7 appIndexJs: resolveApp('src/index.js'), 8 appPackageJson: resolveApp('package.json'), 9 appSrc: resolveApp('src'), 10 yarnLockFile: resolveApp('yarn.lock'), 11 testsSetup: resolveApp('src/setupTests.js'), 12 appNodeModules: resolveApp('node_modules'), 13 publicUrl: getPublicUrl(resolveApp('package.json')), 14 servedPath: getServedPath(resolveApp('package.json')), 15}; 16
webpack.config.prod.js
, находим new ManifiestPlugin
и меняем assets-manifiest.json
на rev-manifiest.json
. Это нужно для того, чтобы Laravel читал пути к файлам из этого файла.1new ManifestPlugin({ 2 fileName: 'assets-manifest.json', // <- rev-manifiest.json 3}), 4
elixir()
. Пример:1 <head> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 4 <meta name="theme-color" content="#000000"> 5 6 <link rel="stylesheet" href="{{ elixir('main.css') }}"> 7 <title>React App</title> 8 </head> 9
В файле public/build/rev-manifiest.json
хранятся пути к вашим файлам CSS и JS. У вас он может быть примерно таким:
1{ 2 "main.css": "static/css/main.d911a965.css", 3 "main.js": "static/js/main.dbf2d25e.js", 4 ... 5} 6
main.css
— указываем в Laravel. static/css/main.d911a965.css
— отображается в HTML странице.Разные названия файлов нужно для того, чтобы не кешировать одну и ту же версию для всех пользователей. Если указать просто main.js
в HTML, то браузер будет подгружать последнюю закешированную версию. И ваши новые измениня не будут приняты до тех пор, пока пользователь не очистит кэш.
npm run build
и видим, что наш проект создался в папке public/build
со всеми принадлежностями.Способом много, но думаю, это самый оптимальный.
1<head> 2 <title>Laravel React App</title> 3 <script type="text/javascript"> 4 window.token = '{{ csrf_token() }}'; 5 </script> 6</head> 7
Теперь мы можем получать токен где угодно, с помощью переменной window.token
, в любом JS файле (на клиентской части). Например сделать так:
1axios.defaults.headers.common['X-CSRF-TOKEN'] = window.token; 2
И при выполнении любого запроса, axios будет отправлять вместе с токеном.