Automatyczny deploy aplikacji Angular na Heroku

Heroku logo

Proces deploymentu, to dla deweloperów temat rzeka. Mamy obecnie wiele możliwości oraz wiele gotowych rozwiązań. W tym wpisie zademonstruję jak wykonać deploy aplikacji napisanej przy użyciu frameworka Angular na Heroku.

Przygotowanie

Na początku musimy trochę zmodyfikować package.json, który został wygenerowany za pomocą Angular CLI. Nasza aplikacja będzie budowana bezpośrednio na serwerze Heroku, dlatego musimy przenieść wymagane zależności z devDependencies do dependencies. W moim przypadku są to:

  • "@angular/cli": "^1.0.1"
  • "@angular/compiler-cli": "^4.1.0"
  • "typescript": "^2.3.1"

Dodatkowo, zadeklarujmy jaką wersję node i npm Heroku powinien wykorzystać do budowania aplikacji. Określamy to w następujący sposób:

"engines": {
  "node": "7.5.0",
  "npm": "4.1.2"
},

W przypadku nie zadeklarowania wersji node i  npm, Heroku użyje domyślnych. W chwili obecnej są to: node 6.10.3 i npm 3.10.10. Lokalnie korzystałem z node 7.5.0 i npm 4.1.2, więc aby wystrzec się błędów i różnic przy instalacji oraz kompilowaniu, zdecydowałem się na zadeklarowanie wersji, z których korzystam.

Budowanie aplikacji

Jeżeli przygotowaliśmy aplikację, przetestujmy czy uda się nam ją zbudować lokalnie. Do tego celu wykorzystamy komendę:

ng build --prod --aot

Parametr --prod oznacza wersję produkcyjną, natomiast --aot Ahead-of-time.

Polecam zerknąć na dokumentację Angular CLI, gdzie znajdziemy wszystkie atrybuty możliwe do wykorzystania podczas budowania aplikacji.

Jeżeli wszystko przebiegnie pomyślnie, zostanie utworzony folder dist/, a w nim znajdować się będzie kod wynikowy. Dodatkowo możemy przetestować poprawność budowania używając serwera http.

Angular app build

Na koniec tego etapu umieszczamy komendę do budowania aplikacji do skryptów. Zależy nam na tym, by Heroku automatycznie wykonało budowanie, więc skrypt nazywamy postinstall.

"scripts": {
  ...
  "postinstall": "ng build --prod --aot"
},

Utworzenie serwera

Do uruchomienia naszej aplikacji na Heroku wykorzystamy niezawodnego Express.js. Instalujemy framework poleceniem:

npm install express --save

Po pomyślnej instalacji, tworzymy prosty skrypt, który wypuści naszą aplikację na domyślny port Heroku czyli 8080:

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/dist'));
app.listen(process.env.PORT || 8080);

Ostatnią czynność jaką musimy wykonać w tym etapie, to podmiana w package.json skryptu start:

"scripts": {
  ...
  "start": "node server.js"
},

Aplikacja na Heroku

Utworzenie aplikacji na Heroku zajmuje chwilę. Na początku wybieramy nazwę aplikacji oraz region gdzie nasza aplikacja będzie uruchomiona.

Heroku create app

Następnie w zakładce Deploy, mamy możliwość wybrania sposobu, w jaki nasza aplikacja ma być dystrybuowana. Mając repozytorium aplikacji w serwisie GitHub, zdecydowałem się na wybranie właśnie tego sposobu.

Heroku deploy app

Teraz możemy zdecydować, czy nasza aplikacja ma być automatycznie deployowana czy też nie. Nic nie stoi na przeszkodzie, by wykonać ręczny deploy w dowolnym momencie.

Heroku automatic deploys

Po wykonanym deployu możemy przejrzeć logi z budowania i uruchomić naszą aplikację.

Heroku log Shopping Manager Web

Migracja do Angular4

Angular4

Nowy Angular żyje i ma się nad wyraz dobrze. Efektem było wypuszczenie nieco ponad miesiąc temu wersji 4.0.0, z kolei zaledwie przedwczoraj wyszła wersja 4.1.0. W tym wpisie omówimy po krótce nową wersję oraz przeprowadzimy migrację z wersji Angular2 do Angular4.

Angular4 – co nowego?

Mniej znaczy szybciej

Projektanci frameworka postawili sobie za cel przyspieszenie oraz zredukowanie kodu wynikowego Angular4. Jak możemy przeczytać na oficjalnym blogu:

These changes reduce the size of the generated code for your components by around 60%  in most cases (..) During our release candidate period, we heard from many developers that migrating to 4 reduced their production bundles by hundreds of kilobytes

Animacje zostały wyciągnięte z @angular/core i umieszczone w osobnym pakiecie. By wykorzystać teraz animations, trzeba zaimportować paczkę BrowserAnimationsModule z pakietu @angular/platform-browser/animations.

Features

Na warsztat poszły dyrektywy *ngIf oraz *ngFor. Można od teraz po stronie HTMLa wykorzystywać składnię if/else:

TypeScript

Update przyniósł również wsparcie dla kolejnych wersji języka TypeScript. Angular4.0.0 jest zgodny z TypeScriptem 2.12.2. Z kolei przedwczorajszy update Angular4.1.0 przyniósł zgodność z TypeScriptem 2.22.3.

To tylko kluczowe zmiany. Zainteresowanych zachęcam do zerknięcia w CHANGELOG.

Migracja

Wpierw rzućmy okiem na nasz package.json. Interesują nas zależności @angular, zone.js oraz typescript.

Angular4 - before migration

Proces migracji zaczynamy od podniesienia TypeScriptu do najnowszej wersji:

npm install --save-dev typescript@latest

W moim przypadku musiałem podnieść także @angular/cli:

npm install --save-dev @angular/cli@latest

Przyszedł czas na zone.js:

npm install --save zone.js@latest

Ostatnim etapem jest podniesienie pozostałych wykorzystywanych paczek, u mnie będzie to kolejno:

npm install --save-dev @angular/compiler-cli@latest

oraz

npm install @angular/{common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Proces migrowania do wersji 4.1.0 przeszedł bez żadnych komplikacji. Kluczowym elementem jest niewielki rozmiar mojej aplikacji. Robiłem jednak wcześniej migrację dużo bardziej rozbudowanego systemu. Problemy, które wyniknęły w trakcie, nie blokowały mnie jednak w żadnym stopniu. Pamiętajmy, że nie powinniśmy zbytnio odwlekać w czasie, aktualizacji systemów, które utrzymujemy i tych które się ciągle rozwijają.

Na koniec jeszcze package.json po wszystkich update’ach:

Angular4 - after migration

Źródła:

  1. http://angularjs.blogspot.com/2017/03/angular-400-now-available.html
  2. http://angularjs.blogspot.com/2017/04/angular-410-now-available.html

Angular 2 – Angular CLI – pierwsze kroki

Angular CLI

Szybki i przyjemny frontend aplikacji internetowej, to marzenie wielu deweloperów. Na przeciw oczekiwaniom programistów wyszedł Google, z produktem Angular CLI. Dedykowany command-line interface ma jedno zasadnicze zadanie, przyspieszyć i maksymalnie uprościć pracę w standardowych czynnościach związanych z tworzeniem i zarządzaniem projektem.

Instalacja Angular CLI

Pierwszy etap pracy z Angular CLI, to globalne zainstalowanie paczki @angular/cli przez npm:

npm install -g @angular/cli

Jeżeli wszystko przebiegło pomyślnie, odpalenie komendy ng help powinno wyświetlić obszerną pomoc. Już na tym etapie możemy zauważyć, że prefiks ng został zarezerwowany, właśnie na potrzeby Angular CLI.

Pierwszy projekt

Gdy mamy zainstalowaną paczkę @angular/cli, nic nie stoi na przeszkodzie, by szybko stworzyć własny projekt. Do tego celu wykorzystamy komendę ng new my_project, gdzie zamiast my_project podajemy nazwę naszego projektu.

Przy tej okazji warto zaznaczyć, że Angular CLI ma wobec nas kilka wymagań odnośnie nazwy projektu:

New project names must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.

Nazwa projektu musi zaczynać się od litery, może się składać tylko ze znaków alfanumerycznych lub myślników. Po myślniku CLI oczekuje wyłącznie litery.

Angular CLI - new project

Jeżeli wszystko przebiegło w porządku nasz projekt powinien wyglądać mniej więcej tak:

Tip

Angular CLI domyślnie tworzy nam style w formacie CSS. Jeżeli wolimy pracować np z językiem SASS, nic nie stoi na przeszkodzie. Możemy to ustalić już na poziomie tworzenia projektu deklarując parametr --style. Pełną listę opcjonalnych parametrów znajdziecie w oficjalnej dokumentacji.

Uruchomienie serwera

Aby uruchomić stworzone przez nas środowisko, należy wpisać w konsoli komendę ng serve. Nasz projekt zostanie zbudowany, a aplikacja zostanie wystawiona pod zdefiniowanym przez nas adresem (domyślnie localhost:4200).

Angular CLI - server run

Aplikacja będzie działać do momentu wyłączenia jej przez nas.

Tworzenie komponentu / modułu / dyrektywy / etc

Sercem stworzonego przez nas projektu jest folder src/app. Początkowo znajduje się tam app.component.tsapp.module.ts oraz plik z widokiem, style oraz testy.

Dodanie nowego komponentu czy modułu jest banalnie proste. Wystarczy, że w konsoli wpiszemy ng generate lub w skrócie ng g, a następnie nazwę tego, co chcemy stworzyć.

Angular CLI rozróżnia następujące funkcjonalności:

Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

 

Podsumowanie

Angular CLI to przyjazne narzędzie, które wspomaga pracę nad frontendem aplikacji tworzone w Angularze. Jest bardzo intuicyjny i wygodny w użytkowaniu. Największego boosta dostajemy na samym początku, kiedy wszystko dostajemy podane na tacy.

Angular CLI - working app