web-handbook

)

Сервис для подготовки IT специалистов (Основная платформа для пользователей);

Команды (Запуск и сборка)

Установить зависимости

npm i

Быстрый запуск

yarn local-development

В проекте не используется webpack-dev-server. Сборка может происходить как в dev так и в prod режиме. Сначала прочитайте команды, ниже будет команды на старт dev разработки.

Сборка клиентской части в dev режиме:

npm run build:client:dev

Сборка клиентской части в dev режиме + мониторинг изменений:

npm run build:client:dev:watch

Сборка клиентской части в prod режиме:

npm run build:client:prod

Сборка серверной части в dev режиме:

npm run build:server:dev

Сборка серверной части в dev режиме + мониторинг изменений:

npm run build:server:dev:watch

Сборка серверной части в prod режиме:

npm run build:server:prod

Запуск сервера с помощью nodemon (Рестарт при изменении сервера)

start:server:nodemon

Запуск css и js линтинга

npm run lint

Запуск для разработки

Необходимо запустить:

• Клиентскую сборку в режиме watch
• Серверную dev сборку в режиме watch
• После сборки сервера запустить сервер через nodemon

Эти команды можно запустить в разных окнах терминала. Для удобства терминал можно разделить на несколько окон.

yarn run build:client:dev:watch
yarn run build:server:dev:watch
yarn run start:server:nodemon

)

Проект доступен по адресу

http://localhost:3000/

Таким образом возможно наблюдать за сборкой Клиентской и Серверной части отдельно.

Конечно, например если вы не планируете работать над серверной частью - нужно просто убедиться что сервер собран и запустить его без сборки. Обртное относится и к клиентской части.

Почему не используется webpack-dev-server?

webpack-dev-server - не компилирует файлы, а держит их в памяти. Стартует виртуальный сервер на порту 8080. Если бы проект состоял только из клиентской части, то этого вполне хватило. Но проект содержит сервер, который тоже нужно собирать/пересобирать и запускать. Сервер запускается на порту 3000. В результате приходится проксировать все запросы с порта 8080 на порт 3000. Появляется некая прослойка которой нет в продакшене, а это может повлиять на рабату боевой версии. Проект же стремится к однообразию и консистентности.

Именования

Создатели экшенов (Action Creators) именуются двумя заглавными буквами на конце AC - например fetchAllPreviewPostsAC Готовая функция dispatch в замыкании которой хранится готовый экшен помечается DA - например fetchAllPreviewPostsDA

Общие правила

---

Изображения в проекте

Предпочтительно использовать svg. Растровые форматы только в крайних случаях. Изображения находятся по пути ./src/assets/icons и ./src/assets/images В обеих папках могут находиться как векторные так и растровые изображения

Стили

В компонентах используем css modules - формат [name].module.scss. В проекте используем scss + css modules либо чистый css

Деплой

Мы работаем с платформой Яндекс.Облако

ENVIROMENT VARIABLES

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

NODE_ENV = development | production - тип сборки проекта (сборка)