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

  • ReactJS
  • 8570
  • Дата: 12.02.2018 в 11: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.
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
  1. В конфиге 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
  1. Во вьюшке Laravel, указываем пусть с помощью вспомогательного метода 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, то браузер будет подгружать последнюю закешированную версию. И ваши новые измениня не будут приняты до тех пор, пока пользователь не очистит кэш.

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

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

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

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 будет отправлять вместе с токеном.

Archakov Dennis

Fullstack Developer (ReactJS, NodeJS) / UI Designer.