Nx + Pnpm + Netlify

Как развернуть приложение из репозитория mono

Контекст

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

В течение нескольких месяцев я работаю только с рабочим пространством Nx. Нет необходимости объяснять здесь все преимущества, которые может дать Nx, но я приглашаю вас посетить веб-сайт. Вкратце, он позволяет вам работать с несколькими приложениями и библиотеками в одном рабочем пространстве. Вы можете разрабатывать проекты Angular, React и Node в одном рабочем пространстве.

На прошлой неделе я решил использовать pnpm вместо npm. Я обнаружил, что это намного быстрее. Нет слов, чтобы выразить удовольствие от установки с его помощью.

Сегодня я хочу развернуть одно из своих приложений благодаря Netlify. Я слышал о нем много хорошего.

Но Netlify не работает с pnpm, и есть некоторые хитрости, которые нужно знать для mono repos. Я постараюсь помочь вам в этом. Для этого, я полагаю, у вас уже есть mono repo с приложением для развертывания, и вы создали учетную запись на netlify.

Шаги

Я предполагаю, что у вас следующая архитектура:

- apps
    - my-first-app
    - my-second-app
    - ...
- libs
Войти в полноэкранный режим Выход из полноэкранного режима

Теперь, я полагаю, вы хотите развернуть my-first-app.

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

// package.json
"scripts": {
    "build:my-first-app": "nx build my-first-app --outputPath=apps/my-first-app/dist",
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Это будет соответствовать стандартной папке dist для netlify. Его нужно объединить с вашей основной веткой (или веткой, которую вы решите развернуть).

Перейдите на веб-сайт netlify и перейдите по ссылке на вкладку deploy:

Перейдите к настройкам развертывания:

Перейдите к Build settings и нажмите Edit settings:

Заполните информацию, как показано ниже:

Введите это в поле Build command:

pnpm run build:my-first-app || ( npm install pnpm && pnpm run build:my-first-app )
Ввести полноэкранный режим Выйти из полноэкранного режима

Нажмите на сохранить. Et voilà (я француз, я тоже могу так сказать). Запустите новое развертывание, и все будет в порядке.

Надеюсь, это может кому-то помочь.

Спасибо, что прочитали.

Подробнее

  • Протестируйте свой Storybook
  • Установка Jest для Angular
  • Перегрузка функций TypeScript
  • Angular для всех: Все об этом

Оцените статью
devanswers.ru
Добавить комментарий