Всем привет!
Сразу скажу, что для тех, кто хоть немного освоил node-js, данная процедура скорее всего не доставит никаких сложностей. По большому счету все будет достаточно проще.
Цель
Развернуть на своем хостинге или локальной машине копию prisma-cms.com. У вас не будет прямого доступа к базе данных, весь обмен данными будет выполняться по API. Но зато вы сможете поиграться с оформлением, а быть может даже предложить какие-то улучшения дизайнерские.
Требования
- OS Linux (я не проводил адаптацию под винду, пока спрос не такой высокий для этого).
- node-js минимум 10 версии (сейчас и 11 есть)
- Оперативки минимум 3 Gb. Вообще для конечной работы скрипта надо совсем немного памяти, но установка зависимостей и билд скриптов требуют не мало.
- git
Установка
1. Скачиваем себе проект
git clone https://github.com/prisma-cms/prisma-cms.com
cd prisma-cms.com
2. Устанавливаем зависимости
yarn --ignore-engines
3. Скачиваем graphql-схему
Как я и говорил, весь обмен данными происходит через GraphQL-API. Если вы еще не знакомы с GraphQL, советую к прочтению.
Вот, чтобы клиентские части могли более полноценно работать с этим, им нужна схема.
Наглядный пример: https://prisma-cms.com/graphql-voyager. Чтобы этот интерфейс смог отобразить все объекты и связи с ним, ему нужна схема, иначе как он все это узнает? Или когда вы пишете запросы в редакторе кода, чтобы интерфейс мог делать подсказки, подсвечивать ошибки и т.п., ему нужна схема http://joxi.ru/LmGyqplHeXYbxA. Ну, без схемы этот редактор и вовсе откажется работать :)
В общем, она нам нужна. Качаем ее.
yarn get-api-schema -e https://prisma-cms.com/api/
В ответ вы должны получить сообщение Schema file was created: src/schema/generated/api.graphql
и там же этот файл должен находиться.
4. Генерируем API-фрагменты
Если вы еще не работали с GraphQL и не знаете еще, что такое фрагменты и с чем их едят, сложно мне будет это сделать сейчас (отложу на потом, на отдельную статью). Сейчас же просто сгенерируйте ее и забудьте:) Просто без нее тоже не будет работать.
yarn build-api-fragments
5. Прописываем точку доступа API
Вообще, все основное уже сделано, но загвоздка в том, что мы разворачиваем не отдельный самостоятельный сайт (хотя эта сборка таковым является, но для ее самостоятельного запуска надо еще призму разворачивать, да и это пустой сайт получится, без наполнения). Вот нам и надо сделать так, чтобы все запросы API и на картинки уходили на https://prisma-cms.com/
Но это не сложно будет сделать. Открываем у себя вот этот файл https://github.com/prisma-cms/prisma-cms.com/blob/master/src/setupProxy.js и меняем его содержимое вот на такое:
// const PrismaProxy = require("@prisma-cms/front/lib/setupProxy");
var proxy = require('http-proxy-middleware');
const cwd = process.cwd();
module.exports = function (app) {
app.get("/voyager.worker.js", (req, res, next) => {
res.sendFile(`${cwd}/node_modules/@prisma-cms/graphql-voyager/dist/voyager.worker.js`);
});
app.use(proxy(["/api/", "/images/"], {
ws: true,
target: 'https://prisma-cms.com',
changeOrigin: true,
secure: false,
}));
// PrismaProxy(app);
};
Вот теперь все API-запросы и запросы на картинки будут как и прежде идти на ваш сервер, но проксироваться на prisma-cms.com
Все :)
Запускаем сайт
yarn start
Если вы запускаете его локально на вашем компьютере, то у вас браузер сам откроется с адресом http://localhost:3000. Если на удаленном сервере запускаете, то подождите пока сбилдятся скрипты и тогда уже открывайте http://вашДоменИлиIP:3000
Теперь у вас своя собственная версия MODX-Клуба, и можете даже локально авторизовываться и писать комментарии, они будут прилетать сюда, а написанное здесь автоматически будет появляться и у вас. Правда здорово? :)
Кастомизируем оформление
Но это, конечно же, еще не все. Самое интересное в том, что теперь всякий, кому не нравится оформление, и у кого честь чувство стиля и руки откуда надо, каждый теперь может внести свой вклад, чтобы все выглядело интересней.
Давайте попробуем что-нибудь по мелочи поменять в оформлении...
Есть две основные "точки входа" по стилям:
1. Material-ui theme provider. Кому интересно, можно здесь, поиграться. Механизм этот для большинства, скорее всего, не понятный, поэтому можете особо не заморачиваться. Но если интерес есть, начните с освоения JSS. Можете, к примеру, вот это прочитать.
После того, как less отредактирован, надо сгенерировать css.
Выполняем
yarn build-less
Если сайт у вас уже запущен (yarn less), то скпомпиллированные стили сразу применятся на странице без какой-либо перезагрузки последней.
Если less-правки не единичные (сидите переделываете весь этот недодизайн) и не хотите каждый раз выполнять yarn build-less, можно запустить компилляцию в режиме watch (отслеживания изменений файлов).
yarn build-less -w
В таком случае стили будут пересобираться автоматически после каждого сохранения less-файла. Довольно удобно.
Бонус
Точно так же вы можете у себя развернуть копию https://pivkarta.ru/
git clone https://github.com/Pivkarta/pivkarta.ru.git
cd pivkarta.ru/
yarn --ignore-engines
yarn get-api-schema -e https://pivkarta.ru/api/
yarn build-api-fragments
# Правим проксирование запросов
# запуск сайта
yarn start
Перед запуском не забываем подправить проксирование по аналогии, как это было описано выше, только вместо https://prisma-cms.com указываем https://pivkarta.ru
Заключение
На сегодня, думаю, хватит материала. У кого получится, похвастайтесь. Впереди еще много интересного будет, будем углубляться в разработку. Ну а вообще, я уверен, что такой формат разработки более перспективный, потому что он позволяет подключать к работе множество сторонних специалистов без необходимости давать им доступ в админку, базу данных, хостинг и т.п., а главное - это формат совместного обучения и развития.
UPD: Если вы хотите полностью развернуть себе самостоятельную копию сайта Клуба, то есть чтобы вообще со своей базой работал и т.п., то вот инструкция:
Пункты 1 и 2 из предыдущей инструкции повторяем.
3. Деплоим базу данных.
Так как мы будем использовать не текущую базу данных MODX-Клуба, а создавать свою, то нам просто надо задеплоить схему, указав endpoint бэкэнда. Вот здесь я писал про то, что это и для чего, и что для тестов поднял публичный эндпоинт: http://test-api.prisma-cms.com
Вы можете использовать его для тестов и в данном примере я тоже буду в него деплоить схему. Выполняем:
endpoint=http://test-api.prisma-cms.com/{project}/{state} yarn deploy
Надо подставить свои project и state. Обычно это было бы, к примеру modxclub/test, но я предлагаю во избежание конфликтов вместо project указывать свой username, а вместо state использовать {project}-{state}.
Например я написал endpoint=http://test-api.prisma-cms.com/fi1osof/modxclub-test yarn deploy
4. Запуск сервера.
Хотя реальная база данных у нас находится на удаленном сервере (в данном случае http://test-api.prisma-cms.com), она у нас только для хранения информации. Реальная логика обрабатывается нашим сервером. Это в примере выше мы проксировали запросы на сайт Клуба, и там вся логика обрабатывалась, а здесь у нас свой сервер. Выполняем:
APP_SECRET={secret} endpoint={endpoint} yarn start-server
endpoint соответственно указываем тот, куда выполняли деплой. secret - произвольная строка, она используется для механизма авторизации пользователей.
Если все запустилось ОК, вы получите сообщение Server is running on http://localhost:4000. Откройте в браузере. По сути это аналог API MODX-Клуба, только для своей базы данных.
5. Запуск сайта
Если у вас сервер запустился, значит можно и фронт запускать. Открываем в новом терминале эту же папку и выполняем:
yarn start
В итоге у вас должен открыться сайт на 3000-ом порту. Так как у вас база своя с нуля, то там конечно же ничего не будет, то есть ни блогов, ни топиков, ни комментариев, ни пользователей. Это не страшно. Регистрируйтесь, заводите блоги, топики и т.п.
Действительно всё очень просто. Поставил за считанные минуты, всё работает.
Дух захватывает, какие это открывает возможности!
Например, IT-франшизы можно делать "на раз", и никакой мороки с созданием отдельного сайта. И никакой мороки с мультидоменностью.
И отличная возможность пощупать руками эти новые технологии
Саша, ты все-то секреты коммерческие сразу не выдавай))
А будет ли статья по реализации api на modx проекте? Интересная тема, а где почитать про это не найду. Есть идея сделать мобильное приложение которое бы редактировало контент на сайте под управлением modx, мне кажется данный вариант api очень даже подойдётподойдёт)))
Здесь не все так просто. То, что вы видите на фронте - это верхушка айсберга. Помимо обеспечения самого механизма API на базе GraphQL есть еще работа с базой данных, генерация запросов и т.п. Проще говоря, даже если вы в MODX воткнете graphql-php и он начнет понимать передаваемые ему запросы, он должен еще и выполнить их, а для этого ему надо прописать соответствующие резолверы. Как я писал ранее, MODX с точки зрения реализации API очень слаб, там много где нет элементарнейших вещей. Но вы можете внимательно изучить это. Это предыдущая реализация modxclub.ru, когда он еще работал в связке с MODX. По сути все API приходилось писать самому. В MODX конечно есть методы определенные, но работа с ними получается настолько костыльная, что я не смог долго усидеть на этом.
Понятно) спасибо))) буду пробовать
Не за что.
Николай, ты писал в статье про IDE. Какой ты сам пользуешься для работы с NodeJS?