Angular4 + CLI + Firebase + CI

Коротка інструкція як швидко створити додаток на 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

При виникненні помилки, наприклад через зміну версії NodeJs, потрібно оновити SASS.

npm rebuild node-sass --force

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

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

Налаштування Travis-CI.

Перш за все уточнимо що таке CI.

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

Якщо простими словами, то після кожного коміту в master вітку репозиторія (або яку ми вкажемо) ми виконуємо повне збирання проекту з встановленням всіх залежностей, прогоном всіх тестів і іншими операціями, які ми хочемо виконати перед побудовою білда (наприклад встановлення нової версії).

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

Sign in to Travis CI with your GitHub account, accepting the GitHub access permissions confirmation.
Після того, як Ви увійшли в систему, і синхронізовані ваші репозиторії GitHub, перейдіть на сторінку профілю і включити Travis CI для сховища з яким будете налаштовувати 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 збирає проект. Остання команда згенерує токен для СІ.