История страниц Github, Angular и Travis

Я просыпаюсь днем ​​с мыслью: Но если приложения Angular, то это всего лишь HTML, CSS и Javascript!. Каким-то образом мы должны загрузить его на страницы Github!

Ну, об этом я и расскажу в этом посте. Если вы думаете, что это слишком долго, в конце вы увидите TL;DR, так что…

Я искал следующее: написать свое приложение Angular, внести изменения и автоматически загрузить и опубликовать их на страницах Github.

Важно!

Версии:

• нпм: 6.4.1
• узел: 10.11.0
• угловой-cli: 6.2.3
• angular-cli-ghpages: 0.5.3

Поэтому, если в конце у вас возникнут проблемы, просто сравните свои версии. Если после этого у вас все еще будут проблемы, свяжитесь со мной.

Угловой 4+

Я не буду объяснять, как работает Angular, полагаю, что все здесь присутствующие знают об этом.

Установите CLI (npm install -g @angular/cli) и создайте свое приложение:

ng new <app_name>

angular-cli-ghpages

Теперь вам нужен пакет, который творит волшебство:

npm install --save-dev angular-cli-ghpages

Отдохните, создайте свое приложение и разверните его! Легко, нет?

Для этого:

ng build --prod --base-href "https://<your_username>.github.io/<your_repo_name>/"

Вы должны увидеть в корневой папке сборку в dist/<your_app_name>. Теперь развертывание, просто введите:

npx ngh --build-dir=dist/<your_app_name>

Поздравляем! Ваше приложение загружено на Github Pages. Оформить заказ через: https://<your_username>.github.io/<your_repo_name>/

Трэвис

Последним шагом к созданию полностью автоматической среды является добавление CI с помощью Travis. Вот мой .travis.yml:

language: node_js
node_js:
- "10"
dist: trusty
sudo: false

branches:
  only:
  - master

cache:
  directories:
  - node_modules

install:
  - npm install -g @angular/cli

script:
  - npm install
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist/code-stats-ranking
  on:
    branch: master

Добавьте это в корневую папку, но пока не нажимайте!

Перейдите на https://travis-ci.org/ и активируйте свой проект. Трэвис поможет вам сделать это!

Важно: Проверьте рецепт travis выше, и вы увидите переменную с именем $GITHUB_TOKEN, это будет токен, который разрешает развертывание travis на вашей странице Github вашего репозитория. Чтобы сгенерировать его, перейдите в настройки Github во вкладку «Настройки разработчика».

Перейдите к Travis и в настройки проекта добавьте переменную окружения.

Давайте попробуем!

Теперь отправьте свои изменения в .travis.yml, и CI выполнит всю работу по развертыванию вашего приложения за вас, теперь вы можете сосредоточиться только на разработке!

Спасибо за чтение!

Если у вас возникнут проблемы с этим, свяжитесь со мной по адресу @jeseromero.