Category: Open Source

Als Java Entwickler ist man verwöhnt. Man hat für alles perfekte Tools (in erster Näherung). Ganz schnell ist ein Projekt mit Maven aufgesetzt, mit Jenkins eine CI Umgebung angeflanscht usw.

Für Webentwickler von JavaScript Anwendungen sieht es da typischerweise schon etwas anders aus. Da ich mich derzeit mit der Entwicklung von AngularJS Frontends beschäftige und die Dinge nun professioneller werden müssen, habe ich mich etwas umgesehen. Zuerst habe ich meist mit einem der Seed-Templates (z.B. angular-sprout) begonnen. Da ist zwar eine wunderbare Struktur vorgegeben, auch schon Tests uvm., aber die Flexibilität hat mir etwas gefehlt, verbunden mit der Tatsache, dass viel von dem Vorgegebenen doch wieder angepasst und geändert werden muss.

So habe ich mich umgesehen und es geht eleganter! Mit Yeoman habe ich ein Tool gefunden, das einen bei der Entwicklung perfekt begleiten kann – vom initialen Generieren einer Anwendung, über das Bauen und Testen bis hin zum Pflegen der Abhängigkeiten.

In diesem Artikel will ich beschreiben, wie man sich eine entsprechende Umgebung in 5 Minuten und 4 Schritten aufsetzen kann.

Hinweis: die ersten drei Schritte müssen nur einmal pro Entwicklungsrechner gemacht werden!

1.) Aktuelle Version von node.js und npm installieren

Auf Linux Ubuntu oder Mint sind die mitgelieferten node Pakete doch relativ alt, so dass es sich empfiehlt, aktuellere zu installieren. Eine Anleitung für alle Betriebssysteme ist hier zu finden: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

Für meine Linux Mint Kiste sind das folgende Schritte:

sudo apt-get update
sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

2.) Yeoman installieren

Yeoman lässt sich nun via npm Paketmanager installieren (hier global für alle User):

sudo npm install -g yo

3.) Generator installieren

Yeoman benötigt sogenannte Generatoren um entsprechende Projekttemplates generieren zu können. Unter http://yeoman.io/community-generators.html findet man jede Menge davon. Für meine AngularJS Projekte habe ich mir den „Yeoman Generator for Enterprise Angular Projects“ (https://github.com/cgross/generator-cg-angular) rausgesucht. Installiert ist dieser binnen Sekunden (wieder global):

sudo npm install -g generator-cg-angular

4.) Die Anwendung selbst anlegen

Nun müssen wir Yeoman mit seinem neuen Generator nur noch die Arbeit verrichten lassen, eine Anwendung zu generieren:

mkdir NewAngularApp
cd NewAngularApp
yo cg-angular

Voila! Das wars auch schon. Jetzt kann man loslegen mit der Entwicklung der Anwendung. Zur Seite stehen einem dazu ein paar Grunt-Tasks zum Bauen und Testen des Projekts, sowie verschiedene Yeoman Subgeneratoren zum Anlegen von Direktiven, Partials, Services und Filtern. Die Dokumentation und weitere Vorzüge sind in der README.md des Generators nachzulesen.