Webentwicklung mit macOS – Einrichten

Hallo zukünftige Webentwickler,

in dieser Beitragsreihe möchte ich euch erklären, wie man macOS einrichtet um Startklar zu sein für die Webentwicklung. Wenn Dieses Tutorial auf größere Resonanz stößt, dann erkläre ich gern die nächsten Schritte oder mache auch gern ein Youtube Video dazu.

Wir werden hierfür das Terminal benötigen. Dieses findet Ihr im Launchpad oder einfach bei Spotlight Terminal suchen. Solltet Ihr keine Erfahrung mit dem Terminal haben, dann kann ich euch dieses Video ans Herz legen.

Leider gibt es keine Möglichkeit Programme einfach über das Terminal zu installieren und zu updaten. Dieses Problem lässt sich mit dem Paketmanager Homebrew beheben. Wenn Ihr das Terminal geöffnet habt, dann gebt Ihr folgenden Befehl ein und führt diesen aus:

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

Quelle

Danach benötigt Ihr noch Node.js. Hiermit könnt Ihr Javascript direkt auf eurem Rechner ausführen und noch viele andere coole Dinge machen, aber das erkläre ich euch im laufe dieses Tutorials. Ihr könnt Node.js jetzt mit Hilfe von Homebrew installieren und auch updaten und müsst nie wieder irgendwelche lästigen Installationspakete runter laden.Ihr installier es mit dem folgenden Befehl:

brew install node

Danach müsst Ihr einen Moment warten und habt danach Node.js installiert. Auch unter Node.js gibt es jetzt einen Paketmanager und dieser nennt sich npm. Wozu braucht Ihr dieses jetzt, Ihr habt doch schon Homebrew installiert? Ihr könnt euch das in etwas so vorstellen, das Homebrew eher Software für eurer System installiert beispielsweise viele Pakete welche es auch unter Linux gibt z.B. OpenSSL. Mit npm könnt Ihr eher Pakete für diverse Aufgabe rund um die Webentwicklung installieren. Es gibt grundsätzlich zwei arten Software mit npm zu installieren. Lokal in dem Projekt oder global auf deinem macOS System.

npm install Paketname

Mit diesem Befehl installiert Ihr Pakete lokal in dem jeweiligen Projekt.

npm install -g Paketname

Mit diesem Befehl installiert Ihr die Pakete auf eurem Mac. Deshalb benötigen wir im Moment diesen Befehl.

Ein extrem cooles Paket für npm ist Yeoman. Hiermit könnt Ihr diverse Generatoren installieren, welche euch fertige Webseiten generieren für die Webentwicklung. Ihr könnt einfach mal etwas in der Liste der verfügbaren Generatoren stöbern: Liste der Generatoren. Installiert wird Yeoman nun mit dem Befehl:

npm install -g yo yo gulp-cli bower

Es gibt nun einen extrem coolen Generator, welcher einfache Webseiten erzeugt. Diesen könnt Ihr euch mit dem folgenden Befehl installieren:

npm install --global generator-webapp

Wenn dies abgeschlossen ist, dann können wir unsere erste Webseite erstellen und zum laufen bringen. Hierzu könnt ihr einfach den Befehl für Yeoman benutzen. Dieser lautet:

yo webapp

Im anschließendem Dialog empfehle ich euch sass abzuwählen und dann die Installation bis zum Ende durchlaufen zu lassen.

YO Webapp

Dann wird eine ganze Menge in eurem WebApp installiert. Dieses sind die gesamten Abhängigkeiten welche benötigt werden, damit es euch die Webseite anzeigt. Starten könnt Ihr das WebApp mit dem Befehl

gulp serve

Danach wird ein lolaler Webserver auf euren macOS Gerät gestartet. Was ist jetzt das coole an dieser Variante? Ihr könnt live Änderungen in eurem WebApp vornehmen und sehr direkt die Änderung!

VorherSeite

In eurem Browser sollte sich nun eine Webseite öffnen welche wie im folgendem Bild aussieht. Dies ist die Startkonfiguration eurer Webseite.

bildschirmfoto-2016-12-05-um-09-29-38

Ihr könnt nun Änderungen vornehmen, zum Beispiel die Überschrift in der Datei /app/index.html verändern. In dem Moment wo Ihr die Datei speichert wird direkt der Browser aktualisiert, ohne das Ihr etwas machen müsst!

NachherSeite

Wenn Ihr fertig seid und auch zufrieden mit eurer neuen Webseite gibt es einen letzten Befehl, welcher die fertige Webseite erstellt!

gulp build

Es wird automatisch ein Ordner /dist in eurem Ordner erstellt. Dieses könnt Ihr jetzt auf eurem Webserver hoch laden und von den Usern bestaunen lassen.

Wollt Ihr mehr Tutorials oder Videos? Dann schreibt es in die Kommentare :-).

Lieben Gruß
trekmann

Veröffentlicht in Webentwicklung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

Time limit is exhausted. Please reload CAPTCHA.