symfony-practice-part3.md

Практическая работа по Symfony. Часть 3. Frontend

Установка и настройка пакетов и библиотек

1. Установите yarn - менеджер пакетов

2. Установите webpack-encore symfony composer require encore

3. Чтобы удобно подключать сторонние фронтенд-библиотеки перейдем на sass - нужно переименовать app.css в app.scss: mv assets/css/app.css assets/css/app.scss

4. В js-файле (assets\js\app.js) также нужно прописать путь к новому scss-файлу

5. Установите sass-loader для сборки sass-файлов в css: yarn add node-sass "sass-loader" --dev. Флаг --dev здесь, также как и в composer, говорит о необходимости пакета только для разработки. На боевой сервер должны уходить уже скомпилированные стили и скрипты.

6. Основной файл для конфигурации сборки фронтенда - webpack.config.js. Для включения работы sass-файлов в нем нужно раскомментировать строку: .enableSassLoader()

7. Установите bootstrap и сопутствующие библиотеки yarn add bootstrap jquery popper.js --dev

8. Подключите установленные библиотеки: app.scss @import '~bootstrap/scss/bootstrap'; app.js import 'bootstrap';

9. Symfony также поддерживает темы для форм. Подключите тему bootstrap, для этого в файле config/packages/twig.yaml нужно определить переменную form_themes внутри twig:

twig:
    form_themes: ['bootstrap_4_layout.html.twig']

Сборка фронденда

Все вышеперечисленные шаги настраивают наш фронтенд - определяют, какие библиотеки подключать, как именно собирать фронтэнд и куда складывать скомпилированные файлы (webpack.config.js). Теперь нужно непосредственно собрать фронт и подключить в шаблон:

1. Сборка осуществляется командой yarn encore dev, если не хотите запускать команду после каждого изменения стилей/скриптов - можно добавить флаг --watch, который будет отслеживать изменения и перекомпилировать билд. Стоит отметить, что с параметром dev файлы генерируются не минифицированные и с одинаковым названием. В таком случае после перегенерации нужно сбрасывать кеш браузера для отображения изменений (Ctrl+F5). При переносе изменений на боевой сервер вместо dev нужно использовать production.

2. Подключим наш билд в шаблоне - для этого в templates/base.html.twig нужно внести изменения.

в блоке стилей:

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}

в блоке скриптов:

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

3. Обновите страницу сайта и убедитесь, что стили подключились. Теперь можно использовать возможности bootstrap в своем приложении.