Краткая инструкция как быстро создать приложение на Angular4 с использованием Angular CLI, настроить Continuous Integration (CI) с помощью Travis-CI и развернуть это все на Firebase. Системой контроля версий будет Git (GitHUB).

Создаем проект.

Прежде всего устанавливаем последнюю версию CLI. На момент написания статьи, последняя версия: 1.1.1 После этого переходим в папку где у нас будет находиться проект, и создаем его.

npm install -g @angular/cli
ng new PROJECT-NAME

При создании могут возникать различные ошибки, такие как ниже например. Это может быть связано с версией NodeJS. Для работы CLI нужна версия Ноды 6.4.0 и выше.

Пример ошибки в CLI при создании проекта для старой Ноды.

Если Вам не повезло и Вы используете Windows, то нужно установить менеджер версий Ноды (NVM) и с его помощью установить нужную версию. Найти его можно по ссылке https://github.com/coreybutler/nvm-windows. Нужно будет загрузить zip файл с .exe файлом программы и запустить ее. Процедура прямо родом из 2000-х, но это же винда.

Для * NIX (Linux, OS X, …) можно использовать утилиту n.

npm install -g n  # Install n globally

Использование:


Usage:
n                            # Output versions installed
n latest                     # Install or activate the latest node release
n stable                     # Install or activate the latest stable node release
n                   # Install node 
n use  [args ...]   # Execute node  with [args ...]
n bin               # Output bin path for 
n rm            # Remove the given version(s)
n --latest                   # Output the latest node version available
n --stable                   # Output the latest stable node version available
n ls                         # Output the versions of node available

Устанавливаем SCSS основным препроцессором CSS. Можно оставить и CSS, но гораздо эффективнее использовать препроцессоры. При создании проекта нужно указать параметр —style=scss

ng new My_New_Project --style=scss

или для уже созданного

ng set defaults.styleExt scss

При возникновении ошибки, например из-за смены версии Node Js, нужно обновить SASS.

npm rebuild node-sass --force

Публикуем проект на GitHUB.

GitHUB нам нужен для простой интеграции с Travis-CI и, конечно же, для хранения репозитория. Опубликовать проект можно различными способами, я просто использую возможности среды разработки (IDE) WebStorm. Последний пункт на фото — Share Project on GitHub.

Настройка Travis-CI.

Прежде всего уточним что такое CI.

Непрерывная интеграция (англ. Continuous Integration) — практика разработки программного обеспечения, которая заключается в выполнении частых автоматизированных сборок проекта для скорейшего выявления и решения интеграционных проблем.

Если простыми словами, то после каждого комита в master ветку репозитория (или которую мы укажем) мы выполняем полную сборку проекта с установлением всех зависимостей, прогоном всех тестов и другими операциями, которые мы хотим выполнить перед построением билда (например изменение версии проекта).

Для начала работы Вам нужен аккаунт GitHub с админ доступ по крайней мере в один репозиторий.

  1. Sign in to Travis CI with your GitHub account, accepting the GitHub access permissions confirmation.
  2. После того, как Вы вошли в систему, и синхронизированы ваши репозитории GitHub, перейдите на страницу профиля и включить Travis CI для хранилища с которым будете настраивать CI.
  3. Добавить .travis.yml файл в хранилище, чтобы сказать Travis CI что строить. В качестве примера можно взять данный файл.
    
    language: node_js
    node_js:
      - "6.11.0"
    branches:
      only:
        - master
    script:
      - echo "Deploing!"
      - npm install
      - ng build
    install:
      - npm install -g firebase-tools
      - npm install -g angular-cli
    after_success:
      - firebase deploy --token $FIREBASE_TOKEN
    
    

Заливаем этот файл в Git и, перейдя на сайте https://travis-ci.org/, открываем проект и смотрим на процесс поднятия приложения.

В этом файле мы указали что хотим использовать NodeJS 6.11.0 версии, собирать проект только с ветки master, установить все необходимые зависимости (firebase-tools i angular-cli). Последняя строка — деплоинг проект на Firebase, но это будет чуть позже.

Здесь еще стоит заметить, что с данной версией Angular-CLI есть какая проблема, ведь после скачивания проекта из репозитория, команты ng server или ng build не работают и возвращают ошибку:

You have to be inside an angular-cli project in order to use the serve command.

Хоть мы и находимся в нужной папке, команды не работаю, но если их прописать в package.json и выполнять через npm — это все делает замечательно. Поэтому в travis.yml можно заменить команду ng build на npm run build:prod.


"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

Firebase деплоинг.

И последним шагом мы настроим развертывания нашего проекта на бесплатном хостинге после каждого комита (Мержа) в master ветку. Нужно выполнить следующие команды: установить firebase, авторизоваться, выбрать проект и сгенерировать токен для CI.

npm install -g firebase-tools

firebase init

firebase login

firebase login:ci

Данные команды создадут файл firebase.json с настройками проекта. Это позволит разворачивать проект с локальной машины при разработке (ну это если потребуется). При настройке проекта надо изменить название папки, по умолчанию это public но нам нужна dist — именно в нее Angular-CLI собирает проект. Последняя команда сгенерирует токен для СІ.

Получив токен, можно его добавить в переменные окружения Travis-CI. Заходим в настройки проекта на Travis и находим следующую секцию:

Создаем переменную FIREBASE_TOKEN которую используем в файле .travis.yml со знаком доллара в начале $ FIREBASE_TOKEN. Это последняя строка в файле.

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Похожие записи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *