Symfony – это простой и гибкий фреймворк, написанный на PHP. В нем достаточно инструментов и опций для того, чтобы создать практически любое веб-приложение. Одна из сильных сторон Symfony – способность создавать устойчивые API (бекенд), которые могут взаимодействовать с JavaScript (фронтенд). Эта статья покажет, как создать и запустить приложение React в Symfony на сервере. Вы сможете применять надежные инструменты управления БД и защиты Symfony, а также интерактивность такого фронтенд фреймворка, как React.
Ниже представлены инструменты, необходимые для понимания того, о чем идет речь в статье:
Symfony – среда разработки приложений;
React – фронтенд фреймворк;
Webpack Encore – система сборки для JavaScript и стилей;
Yarn – диспетчер пакетов для зависимостей JavaScript;
React Bundle – предоставляет рендеринг на стороне сервера и передачу параметров в Twig;
React on Rails – необходим для React Bundle. Упрощает регистрацию компонентов React в JavaScript.
Шаг 1 – собираем инструменты
В этой статье не будет рассказываться о том, как запустить приложение Symfony, но об этом есть уже много полезных ресурсов.
После создания скелета проекта Symfony убедитесь, что установлен Webpack Encore. Проверьте файл package.json, чтобы увидеть, что он установлен и не запущен.
yarn add @symfony/webpack-encore --dev
Он будет использовать Yarn для установки Webpack Encore и создания зависимостей dev.
Диспетчер пакетов Yarn может быть использован для установки всех инструментов, необходимых для создания приложения React. Все данные будут скомпилированы в JavaScript с помощью Webpack. Вот пример того, как может выглядеть блок devDependencies в package.json после полной установки (номера версий могут не совпадать):
"@symfony/webpack-encore": "^0.19.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-on-rails": "^11.0.8",
"react-transition-group": "^2.3.1"
В зависимости от масштаба проекта может меняться количество зависимостей в Symfony, но обязательно нужен пакет:
composer require limenius/react-bundle
После этого вы получите проект со всеми инструментами, необходимыми для создания и запуска приложения с Symfony, React (последний будет отвечать за клиентскую часть). Далее займемся конфигурацией инструментов.
Шаг 2 – конфигурация
Раз уж мы обзавелись инструментами, необходимо правильно их настроить для того, чтобы они верно выполняли свою работу.
React Bundle
Сначала нужно настроить React Bundle для рендеринга компонентов React. Преимущество, сразу же получаемое при использовании этого пакета, - рендеринг на стороне сервера. Это означает, что сервер выполнит работу по компиляции JavaScript и предоставит визуализированный HTML-код при загрузке страницы. Браузеру не придется осуществлять дополнительную работу. После первоначальной загрузки React Bundle передаст все изменения в JavaScript, скачанные браузером с веб-страницы.
После установки с помощью composer, конфигурацию для React Bundle можно найти в config/packages/limenius_react.yml. Она должна выглядеть примерно так:
limenius_react:
default_rendering: "both"
serverside_rendering:
fail_loud: false
trace: false
mode: "phpexecjs"
server_bundle_path: "%kernel.project_dir%/var/webpack/server-bundle.js"
server_socket_path: null
Объяснение каждого из этих параметров можно найти в документации к React Bundle. Основное внимание здесь уделяется опции server_bundle_path. Это путь, по которому расположен скомпилированный серверный файл JavaScript. Чтобы поддерживать минимальную нагрузку при рендеринге на сервере (и следить за тем, чтобы страницы не загружались медленно), этот файл должен быть как можно меньшего размера. Он должен содержать только JavaScript, необходимый для первоначального отображения страницы. Этот файл создан Webpack Encore, который мы обсудим дальше.
Webpack Encore
Webpack Encore – это инструмент для сборки, созданный командой Symfony. Он «строится» поверх Webpack и позволяет более быстро выполнять настройку, предоставляет дополнительные инструменты и опции, специально созданные для Symfony.
Конфигурацию для Webpack Encore можно найти в webpack.config.js в корневом каталоге проекта Symfony. Базовый шаблон должен создаваться автоматически при установке Encore. Он выглядит следующим образом:
// webpack.config.js
let Encore = require('@symfony/webpack-encore');
Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// the public path you will use in Symfony's asset() function - e.g. asset('build/some_file.js')
//.setManifestKeyPrefix('build/')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// the following line enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// allow sass/scss files to be processed
.enableSassLoader()
// React Pages Javascript
.addEntry('js/app', './assets/js/React/App/Startup/registration.js')
// Add style entry
.addStyleEntry('css/app', './assets/scss/app.scss')
// Add react preset
.enableReactPreset()
.configureBabel(function(babelConfig) {
// add additional presets
babelConfig.presets.push('es2015');
babelConfig.presets.push('stage-0');
})
.enableBuildNotifications()
.enablePostCssLoader()
// create hashed filenames (e.g. app.abc123.css)
//.enableVersioning()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
Каждый из этих параметров описан в документации для Webpack Encore, но следующие параметры относятся непосредственно к созданию приложения React:
enableReactPreset() – эта опция позволяет Webpack Encore понимать, что приложение будет обрабатывать JSX в приложении React;
configureBabel() – здесь могут быть установлены особые требования для Babel. На момент написания этой статьи для обеспечения того, чтобы приложение могло правильно скомпилировать все функции ES6, которые предлагается использовать с React, должны быть включены предустановки es2015 и stage-0.
Если для приложения необходимы другие файлы JavaScript, не относящиеся к React, они, скорее всего, также окажутся в этом файле. В конце разработки сайта этот файл конфигурации может также содержать параметры для автоматического добавления префиксов, компиляции SASS и управления версиями.
Большая часть этого кода не требуется для JavaScript, отображаемого на сервере. Следует создать отдельный файл конфигурации Webpack Encore, содержащий только тот JavaScript, который необходим для отображения страницы.
Файл может быть назван как угодно, но здесь он называется CODE">webpack.config.serverside.js.
Файл конфигурации Webpack Encore на стороне сервера может выглядеть так:
var Encore = require('@symfony/webpack-encore');
Encore
// directory where all compiled assets will be stored
.setOutputPath('var/webpack/')
// what's the public path to this directory (relative to your project's document root dir)
.setPublicPath('/')
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// will output as app/Resources/webpack/server-bundle.js
.addEntry('server-bundle','./assets/js/React/ServerRender/registration.js')
// Add react preset
.enableReactPreset()
.configureBabel(function (babelConfig) {
// add additional presets
babelConfig.presets.push('es2015');
babelConfig.presets.push('stage-0');
// no plugins are added by default, but you can add some
// babelConfig.plugins.push('styled-jsx/babel');
})
.enableSourceMaps(!Encore.isProduction())
;
// export the final configuration
module.exports = Encore.getWebpackConfig()
В этом файле путь сборки – var/webpack. Это говорит Webpack о том, чтобы поместить все файлы JavaScript для компиляции в каталог var/webpack. Этот момент совпадает с конфигурацией, установленной для Symfony React Bundle.
React On Rails
React on Rails упрощает регистрацию и объединение приложений React в отдельные файлы. Необходимо использовать рендеринг на стороне сервера в шаблонах Twig. Единственный дополнительный шаг, необходимый для реализации React on Rails, – это создание файл registration.js для каждого приложения React в вашем проекте. Пример таков:
import ReactOnRails from 'react-on-rails'
import ReactApp from './ReactApp';
ReactOnRails.register({ ReactApp });
Это может помочь поместить приложение React в одном каталоге с двумя подкаталогами с именами Startup и Containers. Каталог Startup будет содержать файл на JavaScript с классом приложения React вместе с registration.js. Каталог Containers можно использовать для хранения каждого из компонентов, используемых в приложении. Пример этой структуры можно увидеть ниже.
Шаг 3 – добавляем React в Twig
Последний шаг – добавить приложение React в шаблоны Twig в Symfony. В зависимости от настроек приложения он может иметь несколько шаблонов Twig, каждому из которых соответствует собственное приложение React или одно большое приложение React, которое использует что-то вроде React Router для обработки навигации по страницам.
Добавление React
В пакете Symfony React имеется сокращение для Twig, который автоматически добавляет приложение React на страницу, а также позволяет отправлять на страницу JavaScript, обработанный сервером. Благодаря этому не будет дополнительного времени после того, как браузер изначально отобразит страницу. Сокращение для Twig, нужное для добавления приложения React:
{{ react_component('ReactApp', {'props': {} }) }}
Первым параметром в сокращении является название приложения React, которое было зарегистрировано React on Rails в registration.js.
Параметр props принимает объект, содержащий любые данные, которые первоначально передаются в приложение React. Объекты данных могут быть установлены как переменные Twig, настроенные в контроллере Symfony:
{{ react_component('ReactApp', {'props': {'data': data, 'data2': data2} }) }}
Данные, переданные в сокращении для Twig, могут быть собраны в функции конструктора класса React, зарегистрированного в React on Rails. Данные передаются в объекте, который можно извлечь из параметра props, как показано ниже:
constructor(props) {
super();
this.state = {
data: JSON.parse(data), //If JSON data is provided
data2: data2 // For other types of data
}
}
При использовании сокращения для Twig вы получите визуализированный HTML, созданный приложением React. Для того чтобы приложение продолжало выполнять тег script, указывающий на компилированный файл JavaScript, требуется код React. Его можно добавить, используя обычные действия для Symfony/Twig, как показано ниже:
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/js/ReactApp.js') }}" type="application/javascript"></script>
{% endblock %}
После того как все было добавлено, приложение React должно быть обработано сразу после загрузки страницы вместе со всеми исходными данными. Приложение должно работать так, как планировалось.
Заключение
Теперь на вашем сайте Symfony должно работать приложение React. Вы можете зарегистрировать столько приложений React, сколько понадобится, чтобы ваша кодовая база как бы состояла из модулей. А можно использовать Symfony, чтобы запускать API за приложением из одной страницы. При надлежащем применении Symfony, React способны создать приложение, которое будет соответствовать любым требованиям.