Знакомимся с фронтендом

Файлы и директории frontend

• .eslintrc.js - конфигурация правил линтера, про него ниже
• .eslintignore - список файлов, исключенных из проверки линтером
• .prettierrc - правила форматирования кода, расскажу вместе с линтером
• ecosystem.config.js - конфигурация для запуска сервера pm2, это когда мы будем рендерить фронт на сервере
• package.json - набор зависимостей проекта
• webpack.config.js - ненастоящий конфиг webpack, нужен только для автодополнения в PhpStorm.

• .nuxt - кэш сборки приложений, создаётся автоматически после удаления
• dist - а сюда собираются готовые статические приложения, так же в директории admin и site.
• node_modules - установленные зависимости проекта
• src - исходный код наших приложений, с которым мы и будем работать

ESLint и Prettier

Приложение Site

// Импортируем нужные функции из родительской библиотеки
import {Config, findEnv, loadEnv} from '@vesp/frontend'

// Эти настройки обычно не требуется менять
// приложение поддерживает серверный рендеринг
Config.ssr = true
// директория с исходниками - это текущая директория, та где лежит конфиг
Config.srcDir = __dirname
// Цель сборки может быть static или server, то есть статичные файлы или для сервера
Config.target = 'server'
// Временная директория для файлов сборки
Config.buildDir = '.nuxt/site'
// Настройки статической генерации
Config.generate = {
  dir: 'dist/site',
  exclude: [/^\//],
}

// Здесь мы читаем наш .env файл, чтобы бэкенд и фронт использовали 
// одни и те же настройки
const env = loadEnv(findEnv('../'))
// Дальше идут настройки HTML тега head:
Config.head.title = env.APP_NAME || 'Vesp Framework'
// Здесь ссылки на иконки приложения
Config.head.link = [
  {rel: 'icon', type: 'image/x-icon', href: '/favicons/favicon.ico'},
  {rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicons/favicon-32x32.png'},
  {rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicons/favicon-16x16.png'},
  {rel: 'apple-touch-icon', sizes: '180x180', href: '/favicons/apple-touch-icon.png'},
  {rel: 'manifest', href: '/favicons/site.webmanifest'},
]

// Дополнительные расширения Nuxt
// Именно здесь подключается ESLint, например
Config.buildModules = ['@nuxtjs/style-resources', '@nuxtjs/eslint-module']
// А здесь библиотека Bootstrap-Vue с UX компонентами и PWA модуль
Config.modules = ['bootstrap-vue/nuxt', '@nuxtjs/pwa']

// Иконка Progressive Web Application
Config.pwa = {
  icon: {
    fileName: 'favicons/android-chrome-512x512.png',
  },
}

// Мы используем только определённые компоненты Bootstrap-Vue
// чтобы сделать сборку легче
Config.bootstrapVue.componentPlugins = ['LayoutPlugin', 'ImagePlugin', 'LinkPlugin']

// Файл должен вернуть массив с настройками
export default Config

Команды приложения

• analyze:site - сборка приложения для анализа входящих в него пакетов и занимаемого ими места. Очень полезная штука, если вы не хотите раздувать своё приложение.
• dev:site - запуск приложения в режиме "для разработки", открывается локальный nuxt сервер, который обновляет страницы при изменении исходных файлов. Так называемый hot reload, очень удобно
• build:site - сборка приложения для продакшена в директорию frontend/.nuxt/site
• generate:site - генерация статических файлов для размешения на хостинге без запуска сервера Nuxt, то есть просто набор HTML, JS и CSS
• start:site - а вот это как раз запуск собранного приложения в серверном режиме с серверным рендерингом, через Process Manager (pm2). Про это будем говорить позже.

yarn analyze:site

Структура проекта

• assets - наши картинки, стили, шрифты и прочие ассеты, которые будут импортироваться в проект
• layouts - шаблоны для страниц, как template в MODX
• pages - собственно страницы приложения, как ресурсы в MODX
• static - директория со статичными файлами, которые будут размещены в корне собранного приложения. Например, фавиконки.

Минутка практики

yarn dev:site

• template - разметка страницы с HTML тегами и компонентами Vue
• script - javascript код, который будет работать с этой разметкой
• style - SCSS оформление template

body {
  background-color: $red;
  color: $gray-500;
}

Заключение