AngularJS App mit Gulp anstelle Grunt

Vor kurzem habe ich berichtet, wie sich unter OS X mithilfe von Yeoman eine Angular App erzeugen lässt. Um die erstellte App zu kompilieren, wird dabei Grunt verwendet. Wer allerdings lieber auf die Alternative Gulp setzt, kann dies nun mit einem neu erschienenen Generator tun.

Im Vergleich zum normalen Angular Generator, lassen sich beim generieren viel mehr Einstellungen setzten. So kann man als Beispiel wählen welcher Sass Compiler verwendet werden soll oder ob Bootstrap oder Google Material Design als Layout Basis eingesetzt wird.

Alle Auswahlmöglichkeiten sind hier ersichtlich.

Für mein nächstes Angular Projekt werde ich sicher in Betracht ziehen, einmal auf diesen Generator zu setzen und mir auch mal Gulp anzuschauen.

WordPress.com in neuem Glanz

Gestern bin ich durch ein kleines Projekt wieder mal auf WordPress.com gestossen und irgendwie sah es anders aus als ich es in Erinnerung hatte. Nach kurzer Recherche durfte ich feststellen, dass das Portal tatsächlich erst vor kurzem in einer komplett neuen Version erschienen ist.

Die wichtigsten Neuerungen dabei:

  • In JS geschrieben (Single Page Application)
  • Komplett neues Design
  • OpenSource
  • Verwalten von selbst gehosteten WordPress Installationen via Jetpack (inkl. Artikel, Themes und Plugins)
  • Mac App (mehr oder weniger ein Wrapper für die Webseite)

Auf weitere Details geht ein Artikel bei t3n.de ein.

Mich persönlich spricht das neue Portal sehr an und ich werde meine Blogposts vorerst darüber verwalten.

Neue Symfony minor Versionen

symfony_black_02

Für alle aktuell gewarteten Versionen von Symfony sind gestern neue minor Releases erschienen. Bei allen drei Versionen wurden potenzielle Sicherheitslücken geschlossen, zusätzlich kamen im 2.7 und 2.3 Zweig noch einige Bugfixes hinzu.

Die genauen Release Notes sind in den separaten Blogposts auf der Symfony Seite ersichtlich.

AngularJS App unter OS X erstellen

In diesem Artikel möchte ich aufzeigen, wie unter OS X (getestet mit 10.11) eine einfache AngularJS App erstellt werden kann. Es wird dabei gezeigt, welche Abhängigkeiten installiert werden müssen und wie danach eine einfach App mit Unterstützung von Yeoman erstellt wird.

Homebrew installieren

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Abhängigkeiten via NPM installieren

brew install node #installiert node.js inkl. npm
npm install -g bower grunt-cli yo #installiert weitere Abhängigkeiten
  1. bower als package manager für das Frontend
  2. grunt für das builden der App
  3. Yeoman (yo) bietet die Möglichkeit eine neue Angular App mit allen Abhängigkeiten zu generieren. Es werden automatisch eine bower Datei für die Abhängigkeiten und ein Gruntfile erstellt.

Falls im späteren Projekt Sass verwendet werden soll, muss zuerst Compass installiert werden.

gem install compass

Um über Yeoman eine Angular App zu erstellen, muss zuerst der entsprechende Generator installiert werden.

npm install -g generator-angular

App erstellen

Danach kann via Konsole in das Verzeichnis gewechselt werden, in dem die App erstellt werden soll. Dort drin kann folgender Befehl ausgeführt werden.

yo angular

Es werden einige Fragen gestellt, welche Komponenten installiert werden sollen. Unter anderem kann Bootstrap gleich installiert werden. Auch lässt sich auswählen, ob Sass verwendet werden soll.

Danach läuft der Installer einige Minuten durch, dabei werden unter anderem gleich alle bower Abhängigkeiten installiert.

Testen und publizieren

Ist die Installation abgeschlossen, können unter anderem folgenden Befehle verwendet werden.

grunt serve

Startet einen lokalen Webserver und öffnet die App im Standardbrowser. Werden Änderungen im Quelltext durchgeführt, sind diese im Browser gleich ersichtlich.

grunt build

Erstellt die Webseite im dist/-Verzeichnis. Der Inhalt des Verzeichnisses lässt sich später auf den Webserver transferieren.

Django Applikation in Betrieb nehmen

In den letzten Wochen habe ich mich mit der Entwicklung von Django Applikationen beschäftigt. Dabei ist unter anderem eine kleine Lesezeichenverwaltung entstanden – just give it a try! *leider mittlerweile offline.
Irgendwann während der Entwicklung kam ich zum Schritt an dem ich die Applikation auf einem produktiven Server in Betrieb nehmen wollte. Mit einer PHP Applikation ist das ganz einfach. Apache, PHP und allenfalls noch MySQL oder ähnliches installieren, Dateien hochladen und schon ist die Applikation lauffähig und erreichbar. Mit Python und Django funktioniert das leicht anders. Diese Step-by-Step Anleitung soll helfen, eine Django Applikation auf einem Ubuntu 14.04 Server in Betrieb zu nehmen. Der hier beschriebene Weg ist allerdings für eher kleinere Umgebungen gedacht, für grössere Applikationen ist etwas mehr Aufwand nötig.

System auf den aktuellen Stand bringen.

apt-get update
apt-get upgrade

Voraussetzungen (virtualenv, nginx) installieren.

apt-get install python-virtualenv nginx

Virtuelle Python Umgebung (virtualenv) erstellen.

virtualenv /opt/myproject

Virtuelle Umgebung aktivieren und darin Django installieren.

source /opt/myproject/bin/activate
pip install django

An dieser Stelle muss die entsprechend verwendete Datenbankapplikation installiert werden. Da diese aber in jedem Projekt verschieden sein kann, möchte ich dazu nicht im Detail eingehen.

Neue Webseite für nginx erstellen.

nano /etc/nginx/sites-available/myproject

Diese mit folgenden Inhalt abfüllen (ipaddress muss durch die IP Adresse des Systems ersetzt werden)

server {
server_name ipaddress;
access_log off;
location /static/ {
alias /opt/myproject/static/;
}
location / {
proxy_pass http://ipaddress:8001;
}
}

Seite aktivieren.

cd /etc/nginx/sites-enabled
ln -s ../sites-available/myproject

nginx neu starten.

service nginx restart

Falls dabei ein Fehler auftritt muss in der Datei /etc/nginx/nginx.conf folgende Zeile auskommentiert werden.

server_name_hash_bucket_size 64;

Source Code der Applikation auf den Server übertragen.

cd /opt/myproject
mkdir myproject
cd myproject

Hier kann nun die eigene Django Applikation platziert werden. Der Weg dazu ist frei zu wählen (z.B. FTP oder Git).

gunicorn installieren und Applikation anbinden.

pip install gunicorn
gunicorn_django –bind ipaddress:8001

CTRL+Z betätigen und danach in der Konsole „bg“ eingeben, gefolgt von einem Enter.

App konfigurieren.

nano /opt/myproject/myproject/settings.py

DEBUG auf False setzen.

DEBUG = False

Datenbankeinstellungen setzen und die statischen Dateien konfigurieren.

STATIC_ROOT = ‚/opt/myproject/static/‘
STATIC_URL = ‚/static/‘

Zum Schluss noch die statischen Dateien sammeln.

python manage.py collectstatic

Nun ist die Applikation lauffähig und sollte über den Browser erreichbar sein.