Краткая инструкция как быстро создать приложение на 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 с админ доступ по крайней мере в один репозиторий.
- 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 собирает проект. Последняя команда сгенерирует токен для СІ.
Получив токен, можно его добавить в переменные окружения Travis-CI. Заходим в настройки проекта на Travis и находим следующую секцию:
Создаем переменную FIREBASE_TOKEN которую используем в файле .travis.yml со знаком доллара в начале $ FIREBASE_TOKEN. Это последняя строка в файле.
Теперь после каждых изменений и мержа в мастер будет автоматически собираться проект и разворачиваться на Firebase.