zhansayam / kdl-olymp

Frontend part of the Olymp website

ROCKETFRONT-HYBRID V2

Шаблон для PWA/SSR/SSG/Hybrid приложений на основе Nuxt.js

Преимущества

• Расширение архитектуры Nuxt.js MVVM + Clean Architecture
• Использования DI для доступа к модулям
• Поддержка TypeScript
• Встроенный CLI для генерации документации
• Поддержка Docker для разработки и продакшна
• Интеграция с Capacitor.js для сборки гибридных приложении
• Библиотека компонентов Rocket Firm UI

Докуемнтация

Ознакомиться с докуемнтацией данного шаблона можено в Rocket WIKI по ссылке

Techstack

Основые комманды

Для запуска проекта в докер контейнере в режиме разработки

  yarn docker:dev

Для запуска продакш версий веб-приложения

  yarn serve:prod

Для запуска документации

  yarn serve:docs

Для сборки проекта

  yarn build

Для запуска iOS версий в XCode

  yarn run:ios

Для запуска Android версий в Android Studio

  yarn run:android

Для сборки Android версий

  yarn build:android

Для сборки проекта

  yarn build

Команды генерации

В шаблоне присутствуют команды для генерации boilerplate файлов для ускорения процесса создания:

Для генерации Vue компонентов

  yarn create-component

Так как в шаблоне используется компонентная структура Atomic Design, то команда запросить какого типа компонент требуется сгенерировать.

Для генерации компоненты-страницы

  yarn create-page

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

В шаблоне все наследуется от стандартного Nuxt.js. Однако, в шаблоне присуствуют некоторые архитектурные паттерны:

• models - дирректория, которая хранит в себе структуры данных или их типы/интерфейсы/абстракции
• repositories - дирректория, которая хранит в себе классы, которые делают запросы по API. Для HTTP запросов внутри есть базовый NetAPI класс, который по DI принимает Http клиент и делает запросы по внешним API. Также есть базовый LocalAPI, который записывает или берет данные с локального хранилища. Для работы с последующими репозиториями, надо наследоваться от одного из базовых классов.
• services - дирректория, которая хранит в себе классы, которые производят какие либо вычесления, или служат оберткой для сторонних зависимостей.

Также, в шаблоне структурированы компоненты по Atomic Design. Компоненты деляться на:

• /atoms/* – тут расположены примитивные компоненты: кнопки, заголовки, поля ввода и пр.
• /molecules/* – тут расположены связки/группы примитивов: группы кнопок, карточки и пр.
• /organisms/* – тут расположены связки/группы молекул. То есть компоненты, которая состоит из молекул, которые состоят из примитивов: шапка, списки карточек, модальные окна и пр.
• /templates/* – тут расположены шаблоны страницы

Подробнее можно почитать:

• Atomic Design Methodology
• Atomic Design in practice

Правила документирования проекта

Использовать VueStyleGuidist

пример оформления документирование компонента:

<template>
  <button class="Button" @click="handler">
    <!-- @slot default slot for button content -->
    <slot></slot>
  </button>
</template>

<script>
/**
 * The only true button.
 * @displayName BestButton
 */
export default {
  name: 'Button',
  props: {
    /**
     * The color for the button.
     */
    color: {
      type: String,
      default: '#333',
    },
    /**
     * The size of the button
     * @values small, normal, large
     */
    size: {
      type: String,
      default: 'normal',
    },
  },
  methods: {
    handler(e) {
      /** click event */
      this.$emit('click', e)
    },
  },
}
</script>

Для того чтобы запустить документацию используйте команду: yarn serve:docs или yarn build:docs для билда

---

Docker

Проект обернут в докер для сборки и запуска продакшн версий проекта на сервере, то есть для облегчения деплоя посредством CI/CD

Команды для запуска контейнера:

• docker-compose build --no-cache - сборка контейнера без использования кэша
• docker-compose up - поднятия контейнера

---

CI/CD

В корне можно найти пример конфигурации GitLab CI/CD в файле .gitlab-ci.example.yml

Для корректной работы надо в репозиторий GitLab надо иметь следуюшие переменные:

• $PRIVATE_KEY - ключ для ssh доступа к серверу
• $DEV_USER - имя пользователя для доступа
• $DEV_HOST - имя хоста

Авторы

• @armankuanysh