Skip to content
This repository was archived by the owner on Dec 3, 2025. It is now read-only.

Russian Version

Jump to bottom
Vitek FoxProgs edited this page Aug 22, 2022 · 7 revisions

Настройка OCE сайта

Локально

  1. Клонировать проект git clone git@github.com:texttree/oce.git

  2. Запустить установку пакетов cd oce && yarn

  3. Сделать копию .env.local.example и переименовать в .env.local

    Тут нам надо указать две переменные окружения: GITHUB_TOKEN и DATABASE_URL

  4. Списки аппов и компонентов мы получаем с гитхаб используя запросы GraphQL.

    По этому нужно сгенерировать GITHUB_TOKEN, время жизни указать no expiration, cкоупы не выбирать

  5. В качестве ORM для базы данных мы используем Prisma

  6. В качестве базы данных мы используем облачный экземпляр PostgreSQL (Supabase)

  7. Для локальной разработки можно использовать локальную или облачную версию Supabase.

    В Supabase надо создать новый проект, перейти в Settings -> Database, в блоке Connection string взять URI и установить его в .env.local.

    Для локальной версии Supabase будет что-то такое:

    DATABASE_URL=postgresql://postgres:postgres@localhost:54322/postgres

  8. Для того чтобы создать таблицы в базе данных, нужно запустить yarn seed

  9. Чтобы проверить что все создано верно, запустим в консоли команду npx dotenv -e .env.local -- npx prisma studio

  10. Должен запуститься веб интерфейс Prisma. Если возникли какие-то ошибки, попробуйте запустить npx prisma generate

  11. Теперь можно запустить yarn dev и перейти на сайт http://localhost:3000, на странице со списком аппов и компонентов должны подгрузиться репозитории. На главной странице блок с компонентами и аппами будет пустой так как там данные берутся с базы данных.

  12. База данных заполняется, когда срабатывает хук в репозитории гитхаб. Чтобы настроить локально нужно сделать следующее:

  13. Запустить сайт, если он еще не запущен

    yarn dev

  14. Настроить Ngrok и запустить на 3000 порту

    ngrok http 3000

    Вы увидите что-то типа этого

    Web Interface     http://127.0.0.1:4040
Forwarding        https://9a0b-43-1-42-21.eu.ngrok.io -> http://localhost:3000

    Таким образом мы настроили тунель, и все запросы к https://[URL-ID].eu.ngrok.io будут переадресовываться на наш сайт http://localhost:3000

    В Web Interface мы можем видеть все приходящие запросы и ответы нашего API

  15. Теперь настроим наш репозиторий

На сервере

  1. Для деплоя проекта мы используем Netlify

  2. Если вы используете Supabase,

    то при первом билде нужно указать в переменных окружения DATABASE_URL юрл для подключения к базе

    postgresql://postgres:[PASSWORD]@db.[HOST].supabase.co:5432/postgres

    и запустить дополнительные команды

    npx prisma generate && yarn build

  3. После билда нам надо заменить DATABASE_URL на ссылку с балансиром

    postgres://postgres:[PASSWORD]@db.[HOST].supabase.co:6543/postgres?pgbouncer=true&connection_limit=1 и вернуть команду

    yarn build

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

Как добавить компонент или апп

Базовая настройка

  1. Для того чтобы ваш апп или компонент отображался в списке - достаточно добавить топик scripture-open-components для компонента или scripture-open-apps для аппа

Расширенная настройка

Если вы хотите чтобы у компонента отображались зависимости то нужно правильно настроить репозиторий

  1. Создать файл oce.json

    {
  "name": "npm/@texttree/projector-mode-rcl",
  "version": "0.5.3",
  "date": "2022-04-14",
  "logo": "https://raw.githubusercontent.com/texttree/projector-mode-rcl/master/images/logo.png",
  "dependencies":["npm/core-js", "npm/@texttree/filter-translation-words-rcl"]
}

    name - название пакета. Для аппов не заполняется. По этому названию будет идти привязка через зависимости.

    Так как в разных языках может совпадать название - используем префикс

    js - npm/

    php - composer/

    ruby - gem/

    python - pip/

    version - последняя версия компонента или аппа

    date - дата публикации аппа или компонента (ГГГГ-ММ-ДД)

    logo - ссылка на логотип аппа. Если не указан то будет браться из https://raw.githubusercontent.com/[repo]/master/images/logo.jpg

    dependencies - массив зависимостей. Тут указываем названия пакетов с префиксом.

  2. Добавить вебхук, для того чтобы при изменениях в файле oce.json или в описании, добавлении топиков и т.д. - эти изменения фиксировались в базе данных

    Заходим в Settings -> WebHooks -> Add Webhook

    Payload URL - https://oce-site.netlify.app/api/webhook для продакшн, https://[URL-ID].eu.ngrok.io/api/webhook для локальной работы

    Content type - application/json

    Which events would you like to trigger this webhook? - Let me select individual events.

    Отмечаем Pushes и Repositories

    Добавляем вебхук

  3. В этот момент пройдет пинговый запрос, и данные по репозиторию а так же данные с файла oce.json запишутся в базу данных.

Clone this wiki locally