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

  • понедельник, 12 февраля 2018 г. в 08:30:00

Уже долгое время занимаюсь рефакторингом одного из своих проектов, который когда-то был написан на AngularJS 1.4. Серверную часть я делал на PHP фреймворке - Laravel.

Сейчас этот проект решил переписать на ReactJS, сделав его полность SPA. До этого, была связка View от Laravel с шаблонизатором от AngularJS. Серверная теперь просто RESTful API.

При связке Laravel с ReactJS, возникает вопрос: "Как правильно билдить приложение на ReactJS и подключить к Laravel?". Всё очень просто!

Инструкция

  1. Создаем проект на Laravel (laravel new projectname)
  2. Создаем внутри этой папки приложение на ReactJS (create-react-app frontend) (название папки на ваш выбор).
  3. Запускаем npm run eject для того, чтобы настроить конфигурации проекта по нашему желанию.
  4. Редактируем путь к созданию билда ReactJS приложения в файле frontend/config/paths.js.

_15
// config after eject: we're in ./config/
_15
module.exports = {
_15
dotenv: resolveApp('.env'),
_15
appBuild: resolveApp('build'), // <- меняем на "../public/build"
_15
appPublic: resolveApp('public'),
_15
appHtml: resolveApp('public/index.html'),
_15
appIndexJs: resolveApp('src/index.js'),
_15
appPackageJson: resolveApp('package.json'),
_15
appSrc: resolveApp('src'),
_15
yarnLockFile: resolveApp('yarn.lock'),
_15
testsSetup: resolveApp('src/setupTests.js'),
_15
appNodeModules: resolveApp('node_modules'),
_15
publicUrl: getPublicUrl(resolveApp('package.json')),
_15
servedPath: getServedPath(resolveApp('package.json')),
_15
};

  1. В конфиге webpack.config.prod.js, находим new ManifiestPlugin и меняем assets-manifiest.json на rev-manifiest.json. Это нужно для того, чтобы Laravel читал пути к файлам из этого файла.

_10
new ManifestPlugin({
_10
fileName: 'assets-manifest.json', // <- rev-manifiest.json
_10
}),

  1. Во вьюшке Laravel, указываем пусть с помощью вспомогательного метода elixir(). Пример:

_10
<head>
_10
<meta charset="utf-8">
_10
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
_10
<meta name="theme-color" content="#000000">
_10
_10
<link rel="stylesheet" href="{{ elixir('main.css') }}">
_10
<title>React App</title>
_10
</head>

В файле public/build/rev-manifiest.json хранятся пути к вашим файлам CSS и JS. У вас он может быть примерно таким:


_10
{
_10
"main.css": "static/css/main.d911a965.css",
_10
"main.js": "static/js/main.dbf2d25e.js",
_10
...
_10
}

  • main.css — указываем в Laravel.
  • static/css/main.d911a965.css — отображается в HTML странице.

Разные названия файлов нужно для того, чтобы не кешировать одну и ту же версию для всех пользователей. Если указать просто main.js в HTML, то браузер будет подгружать последнюю закешированную версию. И ваши новые измениня не будут приняты до тех пор, пока пользователь не очистит кэш.

  1. Всё готово! Запускаем npm run build и видим, что наш проект создался в папке public/build со всеми принадлежностями.

P.S. Как вставить Laravel CSRF-токен в ReactJS?

Способом много, но думаю, это самый оптимальный.


_10
<head>
_10
<title>Laravel React App</title>
_10
<script type="text/javascript">
_10
window.token = '{{ csrf_token() }}';
_10
</script>
_10
</head>

Теперь мы можем получать токен где угодно, с помощью переменной window.token, в любом JS файле (на клиентской части). Например сделать так:


_10
axios.defaults.headers.common['X-CSRF-TOKEN'] = window.token;

И при выполнении любого запроса, axios будет отправлять вместе с токеном.

#js#react#laravel#php#webpack
Archakov Dennis

Fullstack Developer (ReactJS, NodeJS) / UI Designer.