Gatsby + Strapi - подготовка окружения для создания CMS #Часть 1

В этой и следующей статьях рассмотрим, как именно, в какой последовательности надо готовить окружение для написания CMS (системы управления контентом) с использованием перечисленных ниже технологий.

Нам понадобится:
Node.js

Gatsby.js

Strapi.js

MongoDB (почему не Postgress или MySQL, поговорим позже).

Что нам обещают? Gatsby обещает "невероятную скорость работы", Strapi обещает удобную систему создания разных видов контента и удобное управление ими. Ну что же, посмотрим. Будем проверять эту теорию, так сказать, на собственной шкуре.

ПРИСТУПИМ:

Установку "ингредиентов" лучше проводить в таком порядке:

#Установка и настройка MongoDB
Сначала ставим Монгу (она понадобится для Strapi.js). С ее установкой немного пришлось повозиться, так как я это делал впервые. Качаем MongoDB (надо выбрать Community Server). Запускаем установщик (msi) и ждём завершения установки. На что надо обратить внимание, так как этому не всегда уделяется внимание в мануалах и статейках: не забыть прописать в переменных средах PATH - указать путь до Монги.
Открываем "Пуск", набираем на клавиатуре "cmd" (запуск командной строки, кавычки не надо), потом в командной строке пишем команду "control" и жмём клавишу Enter. Должна появиться "Панель управления". В панели управления выбираем "Система и безопасность > Система > Дополнительные параметры системы > Переменные среды". Находим переменную PATH и добавляем туда запись "C:\Program Files\MongoDB\Server\3.6\bin". Также не забудьте создать папку "C:\data\db", это путь, используемый MongoDB для хранения данных (по умолчанию) - его можно поменять (также как и место установки MongoDB), но сейчас мы на это не будем тратить время.
Открываем каталог "C:\Program Files\MongoDB\Server\3.6\bin". Нас интересует файл mongod.exe - запускаем его (от имени Админа), это сервер. Если всё нормально запустилось, то в окне терминала в последней строке должно быть "waiting for connections on port 27017". Также надо запустить Mongo.exe.
Всё, по сути, для наших целей мы настроили часть окружения, а именно MongoDB.
И один полезный момент: если что-то пошло не так, то не стоит удалять папку "C:\Program Files\MongoDB" через Del, стоит всё-таки удалить средствами установщика Windows.

#Ставим Gatsby и выбираем "стартовый пакет"
Надо сказать несколько слов о Gatsby.js. Это генератор статических сайтов, работающий с React. Плюсы (пока нам обещают только их): быстрый переход между страницами, использование "плюшек" React, а также несколько стартовых пакетов "из коробки".
Установка (смотрим оригинал мануала):

- запускаем Node.js command promt

- в терминале пишем: "npm install --global gatsby-cli"

Создаем новый проект (с некоторыми оговорками: используем не стандартный пакет, предлагаемый в мануале, а другой стартовый пакет gatsby-starter-docs, для чего нам надо ввести команду:

"gatsby new имя проекта https://github.com/ericwindmill/gatsby-starter-docs".

Например так:

"gatsby new docs https://github.com/ericwindmill/gatsby-starter-docs".

Начнется установка большого пакета, можно откинуться на спинку кресла и подождать.

Командой "gatsby develop" запускаем проект в браузере (подробнее о сборке проектов можно почитать).

Внимательно смотрим, что выдает консоль при запуске проекта - если есть ошибки, необходимо их устранить (недостающие модули и т.д.). Мне предложено было установить пакет gatsby-remark-images:

"npm install --save gatsby-remark-images gatsby-plugin-sharp"

Что мешало добавить этот пакет сразу?

Кстати, кому интересно, вместе с этим пакетом нода "подтянула" Python. Зачем он нужен, разберемся позже или не разберемся. Я, конечно, всё понимаю, но почему не попросили установить Embarcadero RAD Studio, например, или php? ... Хорошо что PATH для Python не пришлось вручную прописывать, спасибо разрабам Python.

Если всё нормально установилось, то, перейдя по ссылке, можно будет увидеть то же самое, что и в демо стартового пакета.

#И тут мне стало страшно после того, как я проверил сколько весит каталог с проектом. Однако, продолжаем. Сколько же будет весить полностью собранный проект с контентом? Это еще не стоит забывать, что мы установили MongoDB, которая тоже занимает место на диске.

#Что дальше?
- установка и настройка Strapi;

- создадим типы контента, используя Strapi, построим взаимосвязи между ними;

- создадим страницы для нашего проекта;

- посмотрим как работает debugger Gatsby;

- напишем тест для проверки скорости загрузки страниц (и выберем систему тестирования);

- продолжим разборку с Node.js+Gatsby+Strapi

#Дополнения / недоразумения / сомнения:
Во избежание недоразумений лучше установить Python, пакет, установленный через njde/npm работает нестабильно (периодически при создании или запуске нового проекта процесс прерывается с ошибкой, требует установить Python). Установка Python решает эти проблемы.