Middleman live reload mit Vagrant
Geschrieben von everflux am Januar 31st, 2015Middleman ist ein static site generator der sich einiges von Ruby-On-Rails leiht, aber eben nur statische Seiten generiert. In vielen Anwendungsfällen ist das auch genau das richtige.
Um die Web-Entwicklung zu erleichtern – vor allem auch mit mobilen Geräten – gibt es das vorzügliche Werkzeug „livereload“. Damit wird im Browser ein reload ausgelöst, wenn sich die Quellen geändert haben. Das spart Zeit und man muss nicht dauernd aus dem Texteditor oder der IDE raus um im Browser einen Reload manuell auszulösen. Zur Integration gibt es zum einen native Browser Extensions, zum anderen kann dies auch über ein JavaScript integriert werden.
Hinter den Kulissen nutzt livereload einen Websocket (ggf. mit Polyfill über Flash) um den Client dann zu informieren.
Was liegt nun näher, als middleman als static site generator mit livereload zu verbinden. Am besten das ganze noch mit vagrant, so dass man eine isolierte Entwicklungsumgebung hat. Da vagrant mit VirtualBox arbeitet, kommt etwas mehr Komplexität auf einen zu. Der middleman läuft nun nicht mehr auf dem physischen Rechner sondern virtualisiert – damit hat er auch eine andere IP. Einzelne Ports koennen in die virtuelle vagrant Maschine reingereicht werden, das ist für das livereload wegen des Websockets schon mal wichtig. Dazu muss in der vagrant Konfiguration (Vagrantfile) folgender Eintrag vorhanden sein:
#middleman live reload port
config.vm.network :forwarded_port, host: 35729, guest: 35729
Jetzt muss middleman noch konfiguriert werden, dass es auch livereload verwendet:
Im Gemfile für middleman:
gem 'middleman-livereload'
In der middleman Konfigurationsdatei muss nun das livereload konfiguriert werden. Hier ist nun die Besonderheit: Das Livereload Plugin differenziert nicht zwischen der Host-Angabe um das Interface zu bestimmen an den der Websocket Server gebunden wird, und der URL die für den Zugriff auf den livereload Server verwendet wird. Gibt man hier „127.0.0.1“ an, bindet er nur an das lokale Interface in der virtuellen Maschine. Gleiches für „localhost“. Gibt man die externe IP des Hosts an, dann findet das rack-livereload das Interface nicht.
Da hilft als letztes nur noch das „Universalbinding“ – zum Glück ist das auch vom Browser nachher aufrufbar:
activate :livereload, :host => '0.0.0.0', :no_swf => true
Was in meinem Fall noch wichtig war: Das Assset hashing darf nicht ausserhalb der build Konfiguration aktiviert sein, andernfalls wird kein JavaScript beim Middleman-server injected.
Was nun noch wichtig ist: Das von VirtualBox verwendete Filesystem-Mounting unterstuetzt kein notify. Damit muss der middleman server zwingend den Polling-Modus verwenden:
middleman server --force-polling
Der einzige Wermutstropfen: Das funktioniert natürlich dann nur auf dem Entwicklungsrechner. Mit ipad oder Android Telefon im WLAN kommt man mit dem „0.0.0.0“ nicht weit. Aber immerhin funktioniert so das live reload mit vagrant.
Neue Kommentare