Прикручиваем ReactJS к Laravel
-
8131
-
21

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