Angular 2 pajahti finaaliin asti

Tämän päivän kiinnostava uutinen: Angular 2 on nyt Final, ei enää pelata RC tai Beta-versioilla.

http://angularjs.blogspot.fi/2016/09/angular2-final.html

Minulla on ollut ilo vuoden sisään veistellä ratkaisuja sekä Angular versiolla 1, Angular 2:lla, että Aurelialla. Näistä kolmesta Angular ykköstä en enää käyttäisi. Aureliassa on monta arkkitehtuurisesti ihastuttavaa asiaa, mutta monet kulmat tuntuvat vielä vähän puolivalmiilta. Voi johtua siitä, että se on vielä puolivalmis. Yksi närä on ylimääräisen jspm pakettimanagerin käyttö.

Angular 2 on tästä kolmikosta tuntunut käytössä parhaalta, jo esijulkaisuversioissa. Siinä on React-maista komponenttiajattelua: Ruutu on komponentti, joka pilkotaan osakomponentteihin, jne. Siinä on kaikki hyvä mitä oli Angular 1:ssä, mutta yksinkertaistettuna. Se vaatii välineiltä vähän enemmän, ja hauskasti ollaan tultu täysi kehä siinä miten yhdistetään html+css+javascript tai typescript koodit. Sen dokumentaatio on erinomaisella tolalla.

Odottelen innolla milloin pääsen taas viuhuttelemaan finaaliversion Angular kakkosta, ja tekemään lisää komponentteja.

https://angular.io/

Mainokset

Angular 2 aloitusopas

Jep, lupailin kirjailla jossain vaiheessa vähän Angular kakkosesta lisää, ja nyt on jossain vaiheessa. Alkuvaikutelmat hyvin positiiviset. En lähde vertailemaan Reactiin, molemmat oikein hyviä tekkialustoja, samoin Aurelia, mutta Angular ykkösen hakkaa iisisti kaikki kolme.

Ensiksi projekti pystyyn: Node ja NPM

Miten kannattaa aloitella? Itse sekoittelen Angularia useimmiten Java-pohjaisiin ratkaisuihin, joskus Nodeen. Joka tapauksessa, homma alkaa Java-puolella Maven Eirslett plugarilla joka varmistaa että kun Jenkins päräyttää buildin, buildikoneesta löytyy projekti-paikallisena asennettuna Node 5.3 ja npm. Paikallisena siksi että sama Jenkins voi tarvittaessa vedellä eri buildiversioita, ja on helppoa kokeilla voiko uuteen päivittää ilman oireita tms. Eirslett konffa tällä hetkellä Mavenin pom.xml:ssä näyttää tältä:

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>0.0.26</version>
  <executions>
    <execution>
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <configuration>
        <nodeVersion>v5.3.0</nodeVersion>
        <npmVersion>3.3.6</npmVersion>
      </configuration>
    </execution>
    <execution>
      <id>npm install</id>
      <goals>
        <goal>npm</goal>
      </goals>
    </execution>
  </executions>
</plugin>

Sitten kirjastot kasaan

No niin, ajat mvn package tai asentelet noden ihan vain nvm:llä taikka käsin, ja siitä se lähtee. Angular kakkosen kanssa en käytä enää Boweria, se on muutenkin mennyt vähän suosiosta. En ole vielä törmännyt juttuun johon ei npm riitä. Asiaa helpottaa, että Angular kakkoselle ei ole vielä niin paljoa sisältöä, ja saa varautua pioneerihengessä vähän rakentelemaan itse melko karuista komponenteista. Joka tapauksessa, tuikataan package.json pystyyn esim. tähän tapaan:

npm init
npm install --save angular2 es6-promise es6-shim@0.33.3 reflect-metadata@0.1.2 rxjs@5.0.0-beta.0 zone.js systemjs

Noilla pääsee alkuun. Toki angular2 riittäisi, mutta nykyisellään näkee kaipaavan pari lisäkirjastoa kaverikseen, liittyen ES6 tukipalveluihin ja vanhojen selainten tukeen. Nykyisellään Angular2 on vähän versiotarkka, siksi versionumerot yllä – korjaantunee rennommaksi jahka päästään irti betasta. Laitetaan myös pari työkalua buildaukseen:

npm install --save-dev concurrently lite-server typescript

Angular 2 on vahvasti suuntautunut TypeScriptin suuntaan – toki sallitaan myös JavaScript, mutta TypeScript on ihanaa! Joten lähdetään alkuun rakentamalla pari asiaa.

Hakemistorakenne ja tiedostot

Tarvitaan perinteinen index.html, bootstrap, sekä ainakin yksi komponentti. Eli tehdään ihan angular2 tutorialin mukainen hakemistorakenne:

touch index.html
mkdir app
touch app/app.component.ts
touch app/boot.ts

Ensin index.html – sinne tarvitaan perus sivurakenne, sekä kirjastojen lataus. Jostain syystä wordpress tänään nikottelee reippaasti eikä anna laittaa tähän kohtaan koko sivua edes pre-tagien avulla. Joten selitän mitä tarvitaan. Otetaan pohjaksi normaali HTML sivu:

<html>
 <head>
 <title>Blogautus</title>
 </head>
 <body>
 <my-app>Loading...</my-app>
 </body>
</html>

Tähän tarvitaan muutama script-tagi. Ensin head-tagien välissä lataa seuraavat kirjastot script-tagein:

node_modules/angular2/bundles/angular2-polyfills.js
node_modules/systemjs/dist/system.src.js
node_modules/rxjs/bundles/Rx.js
node_modules/angular2/bundles/angular2.dev.js

Sitten laitetaan Angular2 bootstrap kohta, myös script-tagien väliin:

 System.config({
   packages: { 
   app: {
     format: 'register',
     defaultExtension: 'js'
   }
 }
 });
 System.import('app/boot')
   .then(null, console.error.bind(console));

Ja lisäile vapaasti kaikki muu mitä haluat. Sivulla ladataan tässä vaiheessa kaikki scriptit, sitten homma käynnistyy app-kansion boot-moduulista, mitä ikinä tekeekään. Tässä tapauksessa potkaisee ensimmäisen, my-app komponentin käyntiin, näin:

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

Siinä oli siis boot.ts tiedosto. Angular2 pohjautuu ES6 malliin ja tuo sieltä hyviä piirteitä mukaan, kuten esim. moduulit. Bootstrap koodi ottaa käyttöön Angular2 bootstrap funktion, ja lataa app-kansiosta component moduulin, ja käynnistää sen. Siitä käynnistyy kaikki muu. Component.ts tiedosto voi näyttää vaikkapa tältä:

import {Component} from 'angular2/core';
@Component({
 selector: 'my-app',
 template: '<h1>Blogautus</h1>'
})
export class AppComponent { }

Tätä  on ehkä jo helpompaa seurata aiemman pohjalta. Käyttöön Component niminen kapistus, jota Angularissa kutsutaan decoratoriksi, mutta muistuttaa myös muiden kielten annotaatiota/metadataa. Tässä tapauksessa on tyhjä komponenttiluokka, johon decorator lisää metadataa kuten komponentin tag-koodin (selector), ja template-osion, jossa on komponentin generoima koodi. Komponenttiluokka itse on tässä tyhjä koska ei ole vielä tilaa eikä funktioita.

Angular ykkösen kanssa puuhastelleet saattavat huomata että tämähän muistuttaa jollain lailla direktiiviä – ja se on totta. Mutta angular ykkösen direktiivi oli aikamoinen hirvitys jota useimmat käyttivät väärin. Angular kakkosen komponentti on lähtökohdiltaan yksinkertainen ja helpommin käytettävä.

Tässä voi myös huomata että jos template-osio on pidempi, voidaan käyttää sensijaan templateUrl-parametria, ja hakea template erillisestä tiedostosta. Tähän ei kuitenkaan kannata haksahtaa – IT’S A TRAP! Suurikokoinen template on nimittäin Code Smells-kohta – oiretta siitä että komponentti kannattaisi rikkoa alikomponenteiksi. Tämä on nimittäin Angular kakkosen yksi parhaista oivalluksista – ja muistuttaa paljon React ajattelutapaa. Sivu on komponentti, joka koostuu komponenteista, jotka koostuvat komponenteista, jotka ovat kaikki uudelleenkäytettäviä, testattavia, ja pieni.

Buildaus ja ajaminen

No niin, mitä tarvitaan että tämän voi pistää prosessoiden ja ajaen? Ensin tarvitaan typescript konfiguraatio ja käännös, esim. näin:

node_modules/.bin/tsc --init
node_modules/.bin/tsc

Ensimmäinen luo tsconfig.json tiedoston, jota voit editoida halusi mukaan. Se määrittää miten typescriptiä prosessoidaan Javascriptiksi. Toinen kääntää koodit. Voi olla että haluat muokata vähän tsconfig.json tiedostoa, tässä versio mitä angular tutorial käyttää:

{
 "compilerOptions": {
 "target": "ES5",
 "module": "system",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "removeComments": false,
 "noImplicitAny": false
 },
 "exclude": [
 "node_modules"
 ]
}

Alunperäinen tiedosto generoi ES3 tasoista kamaa, ja laittoi ne built-kansion alle. Nyt jos ajat tsc-kääntäjän uudestaan, tulee vähän modernimpaa tavaraa, samoihin kansioihin .ts alle. Joka ei ole hyvä, mutta palataan siihen myöhemmin. Se on nyt aluksi helppo. Voit poistaa built-kansion.

Mitäs vielä? Olisi kiva varmaan ajaa ja testata koodia vähän. Se onnistuu ajamalla:

node_modules/.bin/lite-server

Kevyt testiserveri käynnistyy porttiin 3000 ja avaa selaimen näyttämään mitä sieltä löytyy.

Screenshot 2016-01-17 20.59.28.png

Jep, ei ole vielä kovin kummoinen, mutta on se alku. Angular tutorialin tapaan voit vielä laittaa kääntämisen ja ajamisen fiksummin package.jsoniin npm taskeiksi, tähän tapaan:

 "scripts": {
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
 }

Tässä tulee käyttöön concurrent-moduuli, joka ajaa rinnakkain kahta taskia. tsc -w valvoo muutoksia kansioihin ja uudelleekääntää muuttuneet tiedostot. lite-serveri valvoo koodia ja virkistää selaimen kun käännetyt koodit ovat muuttuneet. Voit ajaa tässä kehitysmoodissa komennolla:

npm start

Kokeile vaikka! Tämä on jo aika päheä setti, mutta toisaalta vain ensi osa Angular2 omissa tutorialeissa – ehkä hiukan eri vinkkelistä selitettynä vain. Mutta se on hyvä alku ponnistaa, ja ajattelin kirjailla jatkossa lisää esim. testauksesta ja webpack käytöstä Angular2 kanssa. Saatan myös avautua siitä miksi TypeScript on ihanampaa kuin JavaScript, ja miten homma pelittää vanhemmissa selaimissa.

Oma mielipide siis on ytimekkäästi:

+++Angular2
+++Node5 ja npm
+++Webpack
+++Typescript

Lue myös: https://angular.io/docs/ts/latest/quickstart.html

 

 

 

Angular 2 käyttöön

Viime ajat on tullut vietettyä Angular kakkosen kanssa. Tarkoitus oli alunperin jo joulun aikoihin käyttää kunnolla aikaa tähän uuteen päivitykseen, mutta silloin tuli kaikenlaista pientä tekemistä tielle.

Ensivaikutelma on ihastus. Kirjoittelin taannoin Aureliasta, joka on myös hieno paketti, ja jossa on paljon samaa Angularin kanssa. Mutta Angularin vahvana etuna on pitkät perinteet ykkösversiosta, ja sen myötä laaja käyttäjäkunta. Uusi versio ei heitä kaikkea roskiin, mutta tuo kaikenlaista mukavaa uutta. Tässä muutama highlight poimintana:

  • Typescript – ei ole pakko käyttää sitä mutta onhan se ihanaa
  • ES6 ja moduulit – käytä mitä osia kaipaat, ei tarvitse ladata kaikkea joka projektiin
  • Komponentit – ah miten elegantti ja ketterä lähestymistapa ui kehityskeen

Angular kakkosesta on ehditty jo kirjoittamaan tiukkoja vertailuja toista kuningasta – Reactia vastaan – ja puolin ja toisin. Molemmilla lähestymistavoilla lienee jatkossakin omat faninsa.

Vastaavasti laskukäyrän puolella olisi Bower ja Grunt – tuntuu että Angular kakkosen kanssa luontevaa on yhdistää npm, Webpack, ja tarvittaessa Gulp – jos sitäkään. Keep it simple, stupid! Node vitonen on myös nopea buildihommissa – ja aiemmin taisinkin jo kehaista npm:n nykyistä windows-ystävällistä hakemistorakennettakin.

Lähitulevaisuudessa tulossa jotain katsojaystävällistä getting started-tutoriaaliakin, toki hyviä on ihan Angularin omillakin sivuilla.. Mutta jos haluaa vähän helloworldiä realistisempaan mennä…

Devaajan maccikone tikkiin

Olen pitkien Linux ja Windows kausien jälkeen päätynyt tekemään työhommat Macbook Pro:lla, joka on ollut positiivinen kokemus. Siinä kivasti yhdistyy helppo käytettävyys, ja toisaalta Linux-mainen johdonmukaisuus. Jos joku ei toimi, korjaus on sama kaikilla, ja komentorivi on lähellä ja hyvä.

Pari kertaa on nyt työkone tullut asenneltua. Teen töissä tyypillisesti arkkitehtuurisuunnittelua, prototypointia, ja sekä Java backend koodia että Angular/React/Node JavaScript hommeleita, muutamalla eri kannalla riippuen projektista. Ensimmäisellä kertaa kun Mac oli uusi kokemus, kaikki meni käsityönä ja puolet asioista ihan päin prinkkalaa. Mutta kirjoitin kaiken muistiin, ja toisella kertaa päätinkin sitten automatisoida hommat.

Mac devaajan ihania kavereita ovat Homebrew, NVM, ja JENV. Näistä jälkimmäisistä olenkin kirjoitellut pari artikkelia aiemmin, mutta mainittakoon että laitoin dev-koneeni homebrew scriptit yleiseen jakoon Gittiin. Pohja-asennuksina on meidän IT:ltä tuleva OSX Macbook Pro, Yosemite tai Il Capitano, jossa on perus antivirukset ja officet ja emailit jo viritettynä kuntoon. Hyvä idea asentaa myös perus osx patchit ja java fixit. Sen päälle asennan Homebrew:n, ja sitten ajan tämän scriptin:

https://github.com/crystoll/osxinstall

Ja kuten scriptiä lukemalla käy ilmi, aika paljon kamaa on koneessa sen jälkeen. Yksi kollega vinkkasi vieläkin elegantimman scriptin, niinikään Githubissa, jossa on aikalailla samaa kamaa, mutta toteutus Ansiblella, jolla voi paikata vielä aukkoja joita esim. Homebrewn jäljiltä jää:

https://github.com/hoxu/osx-dev-playbook

Lopputulos kuitenkin: Pistät scriptin jylläämään, otat ison kupin kahvia, tabletista tai kännykästä yoububeen kunnon kissavideokanavan, ja kun kahvi on juotu tai kylmää, työkone on kunnossa. Kivasti säästää aikaa ja energiaa ja takaa että lähtökohdat ovat aina samat. Jos on muutama sata devaajaa talossa, parin htp:n säästö per napa muutaman vuoden välein on ihan kiva. Ja itse tykkään että asiat menee aina samalla tapaa, eikä tarvi uudelleen muistaa mitä kaikkea on syytä tehdä. Toki vähän huoltoa kaivataan, ja tuota ansible scriptiäkin voisi vähän pilkkoa rooleihin, modulaarisuus antaisi mahdollisuuden viritellä vielä paremmin. Joku voisi kaivata jotain kivaa rasti ruutuun käyttöliittymääkin, mutta minä en 😉

Automate everything! *ryystää kahvia^*

 

 

Sosiaaliturvatunnuksen tarkistus Angular-direktiivillä

Jep, tuli tarpeeseen ihmetellä Angularin direktiivejä ja validointia – miten sosiaaliturvatunnuksen oikeellisuus validoidaan? Tähän ei löytynyt pikaisella haulla valmista ratkaisua joten ei muuta kuin tekemään oma.

Suomalaista sosiaaliturvatunnusta kun ihmetellään, niin osan tarkistuksista voi hoitaa ihan olemassaolevilla direktiiveillä. Esim. pituus tasan 11 merkkiä, aina. Tunnuksen muodon osalta voi olettaa siinä olevan numeroita ensin kuusi, sitten välimerkki jossa on muuutamia mahdollisuuksia, sitten kolme numeroa, ja tarkistuskoodi joka voi olla numero tai kirjain tietystä valikoimasta. Tämä hoituu komeasti esim. Angularin regex-patternilla.

Mutta syy miksi kirjoitan tätä blogia itselleni muistiin on nimenomaan tuon viimeisen merkin tarkistussumman laskeminen, ja oman custom validation direktiivin teko. Se menee nimittäin näin:

(function() {
  angular.module('app').directive('validSsn', validSSN);

  validSSN.$inject = ['$log'];

  function validSSN($log) {
    var checksumChars = 'abcdefhjklmnprstuvwxy';

    var validateSSN = function(value) {
      if (value === undefined || value.length != 11) {
        return false;
      }
      var datePart = value.substr(0, 6);
      var individualNumber = value.substr(7, 3);
      var checkSumCharacter = value.substr(10).toLowerCase();
      var dividedValueModulo = parseInt(
          String(datePart) + String(individualNumber)) % 31;
      var expected;
      if (dividedValueModulo < 10) {
        expected = String(dividedValueModulo);
      } else {
        expected = checksumChars.charAt(dividedValueModulo - 10);
      }
      if (checkSumCharacter === expected) {
        return true;
      } else {
        $log.debug('Expected checksum ', expected,
          ', got checksum ', checkSumCharacter);
        return false;
      }
    };

    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, elem, attr, ctrl) {
        ctrl.$parsers.unshift(function(value) {
          var valid = validateSSN(value);
          ctrl.$setValidity('valid-ssn', valid);
          return value;
        });

        ctrl.$formatters.unshift(function(value) {
          var valid = validateSSN(value);
          ctrl.$setValidity('valid-ssn', valid);
          return value;
        });

      }
    };
  }
}());

No niin, tuossa on vielä paljonkin siistittävää ja optimoitavaa, mutta jätetään se itsekunkin omaksi harjoitukseksi. Idea käy silti ilmi. Katsotaan ensin että arvo on olemassa ja oikean mittainen – ellei, se automaattisti ei läpäise validointia. Jos mitta on oikea, otetaan kaikki data-osan numerot, 9 kappaletta, merkkijonona, ja jaetaan alkuluvulla 31. Jakojäännös kiinnostaa – jos se on alle 10 se on suoraan tarkistuskoodi, jos se on 10 tai yli, verrataan kirjaintaulukkoon josta on muutama kirjain selvyyden vuoksi poistettu.

Sitä voi testata esim. näin:

it('should pass validation with valid ssn', function() {

  var element =
        $compile(
          '<form name="form">' +
            '<input valid-ssn name="ssn" ng-model="value" />' +
          '</form>')($rootScope);
  var form = $rootScope.form;

  $rootScope.value = '140785-940X';
  $rootScope.$digest();
  expect(form.ssn.$valid).toBeTruthy();

  $rootScope.value = '140785-940x';
  $rootScope.$digest();
  expect(form.ssn.$valid).toBeTruthy();

  $rootScope.value = '140785-9143';
  $rootScope.$digest();
  expect(form.ssn.$valid).toBeTruthy();

});

Tällaista tällä kertaa. Jos hommaa haluaisi vielä kehittää. voi toki tarkistaa että päivämäärä on oikea, sukupuoli vastaa muualla annettua tietoa, if any, jne.

Uutta Javascript-rintamalla: Aurelia

Olin aikeissa perehtyä syvemmin tulevaan Angular 2- versioon, mutta eksyinkin reitiltä. Tammikuussa nimittäin julkaistiin uusi Javascript framework nimeltä Aurelia. Sen taustavoimista löytyy entinen Angular2 tiimiläinen, ja framework teki aikamoisen vaikutuksen.

Kun sanon uusi, niin tarkasti ottaen ei tämä ihan tyhjästä putkahtanut – se on aiemmin tunnettu nimellä Durandal, ja perustuu moneen jo ennestään liikkeellä olleeseen palikkaan.

Joka tapauksessa, frameworkin olennaiset piirteet:

  • EcmaScript 6 ja 7 tuki – ja koodi pyörii nyky/vanhoissa selaimissa Babel 6to5 transpilerin johdosta. ES6 on jo itsessään melkomoisen maistuvaa tavaraa
  • jspm pakettimanageri
  • modulaarisuus: voit valita mitä moduuleja otat, ja yhdistellä niitä juohevasti muiden javascript frameworkkien kanssa
  • koodin puhtaus ja yksinkertaisuus, verrattuna esim. Angulariin – yhdistetään ES6 parhaat piirteet, ja konventiot ohi mekaanisten deklaraatioiden, hyvältä näyttäisi.
  • Binding on voimallinen alue, jossa Aurelia hakee tehokkaimman ratkaisun bindaukseen aina tilanteen ja kyvykkyyksien mukaan, ilman että sillä vaivataan koodaajan päätä liikaa

En ehkä vielä sanoisi että ready for primetime, mutta ehdottoman mielenkiintoinen tulokas, jota aion itse seurata tarkkaavaisena, ja on tuo vaivan arvoinen jo pelkästään ES6 itseopiskelun labrana.

Tuolta sitä saa: http://aurelia.io/

Spring Boot, Java 8, AngularJS, ja Heroku pilvipalvelu

Tuli ajankohtaiseksi puskea Spring Boot sovellus Herokun alle tarjoiltavaksi. Heroku on siitä vänskä palveluntarjoaja että sieltä saa ilmaisella jäsenyystasolla jo jonkun verran prosessoriaikaa, ja resursseja – samoin kuin Google App Enginestä (ainakin aikoinaan).

Homma ei mennyt ihan heittämällä, joten kirjailen taas vähän kokemuksia ja säätöjä tähän. Omassa tapauksessani muutama kiemura johtui siitä että olin yhdistänyt sekä Javaa että Angularia samaan pakettiin – ja Heroku parka meni sekaisin sen suhteen mitä pitäisi buildata ja miten. Muuten Spring Boot + Heroku on taivaassa tehty liitos, mahtava yhdistelmä!

Mitä tarvitaan/esivalmistelut:

– Yksi Spring Boot sovellus, jossa esim. In-Memory tietokanta ja AngularJS UI sisään paketoituna – ei niin välttämätöntä, mikä hyvänsä Spring Boot käy lopulta, mutta kannat vaativat toki esim extratyötä

– Projekti pitäisi olla git versioitu, se tekee heroku käytön suorastaan naurettavan helpoksi

– Tietty Heroku free tier tunnukset tarvitaan, ja ne tulisi olla tiedossa

– Heroku Toolbelt asennettuna omalle käyttöjärjestelmällesi

– Pientä lisäjännää: Haluat ehkä lisätä bower_components tyyppiset vendor javascript kirjastot gittiin, koska jos buildaat projektin Java builderillä, mitään automatiikkaa javascript/angular puolelle ei ole, eli sen mitä lähetät Herokuun tulisi olla joko Mavenin kautta buildattua automaattisesti, tai sitten esirouskuteltua staattista sisältöä. bower_components pusku gittiin on muutenkin paras käytäntö koska ulkomaan repositoryt tai interweb eivät noin muutenkaan ole aina buildatessa saatavana, joten näillä mennään!

Ja sitten touhuamaan. Aluksi kannattaa lisätä projektiin muutama tiedosto, ellei niitä jo ennestään löydy. Tarvitset settings.properties tiedoston, Procfile tiedoston, ja application.properties tiedoston. Näistä kaksi ensimmäistä liittyy Heroku-alustaan, ja viimeinen on Spring Boot standarditiedosto – joka on luontevaa tallettaa /config kansioon.

Tässä niiden sisältö:

  • /settings.properties (asettaa JDK versioksi 8)
    • system.properties=1.8
  • /Procfile (kertoo mikä sovellus ja mistä käynnistyy)
    • web: java $JAVA_OPTS -jar target/*.jar
  • /config/application.properties (määrittää käyttäämän serveriporttina PORT ympäristömuuttujaa, tai 8080 jos sitä ei löydy)
    • server.port: ${port:8080}

Näistä tosiaan application.properties saattaa olla jo tehtynä, ja voi olla muussa kansiossakin, eli ole tarkkana. Se on Spring Boot perustiedostoja.

Nyt voidaan alkaa touhuamaan. Lisää kaikki edellämainitut git repositoryyn, commitoi, ja jatka näillä Heroku komennoilla:

  • heroku login (tänne sitten tunnareita ja salasanaa Herokun mukaan)
  • heroku create (luo sovelluksen, ja käytännössä määrittelee uuden remote repositoryn nimeltä heroku)
  • heroku buildpack:set https://github.com/heroku/heroku-buildpack-java (asettaa builderiksi juuri Java, eikä esim. NodeJS tms)
  • heroku ps:scale web=1 (asettaa käyttöön yhden dynon, ellei ole jo – nyt on resursseja ajamaan sovellusta)

Voiton puolella jo! Nyt voidaan puskea sovellus herokuun, tähän tapaan:

git push heroku master

Seuraa tarkkaan ilmoituksia mitä näkyy – etenkin jos virheilmoituksia ilmenee. Jos kaikki sujui hyvin, voit nyt avata sovelluksen:

heroku open

Toimiko? Onnittelut! Jos ei pelannut, tässä muutama debugging niksi:

  • Tarkista Heroku logit komennolla: heroku logs –tail
  • Tarkista web dynojen status komennolla: heroku ps

Huomioi että jos dynoja on vain yksi käynnissä, Heroku nukuttaa sen jos tuntiin ei ole ollut käyttöä. Näin ollen se käynnistyy hitaanlaisesti kun sitä taas tarvitaan. Tämän voi kiertää laittamalla kaksi dynoa – tai enemmän:

heroku ps:scale web=2

Huomaa että free tier antaa vain 750 dyno-tuntia, joten kahden dynon voimalla ei piisaa tehoja kuin puoleen kuukauteen ilmaistasolla. Muista myös sammutella dynot kun et niitä enää tarvitse, komennolla:

heroku ps:scale web=0

Näin! Spring Boottia voi siis tunkea Raspberry Pi kakkoseen, tai pilveen. Vaikuttaa aika toimivalta alustalta nykymuodossaan.

Tässä hyvä linkki myös artikkeliin jossa käsitellään Heroku multi-buildpack strategiaa – eli miten voit buildata sekä Java että JavaScript puolen erikseen sillä suunnalla.

https://devcenter.heroku.com/articles/using-grunt-with-java-and-maven-to-automate-javascript-tasks

Itse käytin joskus aikanaan Eirslett Maven-Grunt pluginia, joka osaa imaista node, npm, bower jne työkalustot paikallisiksi ja käyttää niitä projektin alta – mutta se oli aika monimutkainen ja kömpelökin ratkaisu. Monella on tarpeista riippuen ollut menestystä myös ihan exec-maven pluginin kanssa javascript prosessoinnissa, mutta sen ongelmana on että node pitäisi olla koneeseen asennettuna etukäteen.