GraphQL/Relay Boilerplate

Шаблонная система, содержащая в своем дистрибутиве сервер GraphQL, систему управления контентом на RelayJS и веб-сайт на RelayJS с поддержкой рендеринга на стороне сервера (SSR).

Что содержит бойлерплейт?

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

• graphql - Репозиторий GraphQL сервера, в основе которого @via-profit-services/core. Сервер реализован на NodeJS. В качестве базы данных предпочтение отдано PostgreSQL. Для кэша используется Redis

• website - Репозиторий с заготовкой для разработки полноценного веб-сайта на RelayJS. Возможна разработка как одностроничного (SPA) сайта, так и многостраничного сайта. В сборку заложена поддержка шаблонов.

• admin - Репозиторий с заготовкой для разработки CRM-системы или полноценного веб-сайта на RelayJS.В сборку заложена поддержка шаблонов для веб-сайта.

Для чего?

Этот бойлерплейт создан для:

1. Для возможности быстро начать разработку сайта или CRM-системы не расходуя время на подготовку репозитория, списка пакетов, модулей и построения архитектуры будущего приложения.

2. Для возможности фронтендеров прикоснуться к бэкэнду на GraphQL не изучая его предварительно.

3. Для того, чтобы было

Как с этим работать?

Сначала настройте окружение (см. ниже). Проект является монорепой и вмещает в себя 3 репозитория:

• packages/graphql - GraphQL сервер, построеный на базе @via-profit-services/core
• packages/admin - Web админ-панель (фронтенд) для сайта или фронтенд для CRM-системы. Построены на RelayJS
• packages/website - вебсайт, построеный на RelayJS

Основой всего является GraphQL сервер, который выступает в роли бэкенда для сайта и админ-панели. Фронтенд проектов базируется на общих принципах Relay JS, и выполнен в соответствии с официальной документацей от Relay.

Особенности

React-intl

В качестве системы переводов (мультиязычность) используется react-intl со всеми вытекающими последствиями, а именно:

• После каждого изменения текстовых заполнителей следует пересобрать переводы командой npm run i18n. Данная команда выполнит extract сообщений (extracted messages) в файл lang/ru-RU.json и запустит компиляцию переводов, которые попадут в директорию src/translations.
• Не следует указывать идентификаторы сообщений как этого требует документация formatjs, так как идентификаторы генерируются автоматически по средствам babel плагина babel-plugin-formatjs.

Relay JS

• Так как весь фронтенд проекта построен вокруг Relay JS, следует помнить, что после изменений в GraphQL запросах, возможно, вам потребуется запустить анализ проекта для Relay-compiler (npm run relay), чтобы тот, в свою очередь, сгенерировал новые типы (артефакты).
• По умолчанию, Relay-compiler запускается с аргументом --watch, который требует наличие установленного watchman. Для нормальной работы системы установите watchman следую официальной документации.

Настройка окружения проекта graphql для локального использования

1. Слейте репозиторий и установите зависимости:

$ git clone git@github.com:via-profit-services/boilerplate.git
$ cd boilerplate
$ npm install

2. Создайте и/или настройте базу данных PostgreSQL:

$ sudo -u postgres psql # To go to psql shell

Пример конфигурации базы данных:

create database boilerplate; -- Create database
create user boilerplate with password 'admin'; -- Create user
alter database boilerplate owner to boilerplate; -- Grant all privileges

3. Скопируйте .env.example файлы в файлы с именем.env для каждого проекта:

$ cp ./packages/website/.env.example ./packages/website/.env
$ cp ./packages/admin/.env.example ./packages/admin/.env
$ cp ./packages/graphql/.env.example ./packages/graphql/.env
$ cp ./packages/graphql/.knex/.env.example ./packages/graphql/.knex/.env

Заполните файлы .env в соответствии с вашими данными

Список файлов конфигураций окружения:

• packages/graphql/.env - Настройки GraphQL сервера
• packages/graphql/.knex/.env - Настройки миграций
• packages/admin/.env - Настройки CRM
• packages/website/.env - настройки вебсайта

4. Создайте JWT ключи.

Чтобы JWT работал, необходимо сгенерировать SSH-ключи с использованием алгоритма, например, RS256.

Замечание: При запросе парольной фразы просто нажмите Enter, чтобы оставить этот параметр пустым. То же самое необходимо сделать при подтверждении парольной фразы.

В корне проекта (на том же уровне, что и package.json) создайте каталог ключей и создайте в нем ключи, выполнив команды:

$ mkdir -p ./packages/graphql/.keys
$ ssh-keygen -t rsa -b 4096 -m PEM -f jwtRS256.key  # Don't add passphrase, just press Enter
$ mv ./jwtRS256.key ./packages/graphql/.keys/
$ mv ./jwtRS256.key.pub ./packages/graphql/.keys/

5. Скомпилируйте миграции.

$ npm run build:migrations

6. Примените миграции.

$ npm run migrate:latest

7. Сгенерируйте Relay артефакты. Данная команда запусти GraphQL-сервер и сгенерирует Relay артефакты для всех проектов. Убедитесь, что .env файлы заполнены верно.

$ npm run prepare:relay

Windows: По окончанию процесса, возможно, останется запущенный терминал. После сообщения типа Now you can start your projects, just run «npm run start» его следует закрыть.

8. Запустите все проекты. Команда ниже запустит все три проекта за раз.

$ npm run start

9. (необязательно) Примените сиды.

$ npm run seed:run