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

Дата: 12.02.2018 в 11:30, Категория: ReactJS
  • 7300
  • 19
Прикручиваем ReactJS к Laravel

Уже долгое время занимаюсь рефакторингом одного из своих проектов, который когда-то был написан на 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.
// 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')),
};
  1. В конфиге webpack.config.prod.js, находим new ManifiestPlugin и меняем assets-manifiest.json на rev-manifiest.json. Это нужно для того, чтобы Laravel читал пути к файлам из этого файла.
new ManifestPlugin({
    fileName: 'assets-manifest.json', // <- rev-manifiest.json
}),
  1. Во вьюшке 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, то браузер будет подгружать последнюю закешированную версию. И ваши новые измениня не будут приняты до тех пор, пока пользователь не очистит кэш.

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

Тэги: