Terminal für Web-Entwickler – Diese Befehle solltest du kennen

Die meiste Zeit kommt man als Entwickler:in ganz gut ohne die Konsole bzw. das Terminal aus. Dennoch gibt es Situationen in denen man sich wünscht, man hätte sich nicht so lange vor der unliebsamen Kommandozeile gedrückt. Spätestens beim Umgang mit Git oder Package Managern, rächt sich die Vernachlässigung. Aber keine Sorge, in diesem Beitrag lernst du alles was du brauchst um mit dem Terminal durchzustarten. 🚀

Wozu brauchst du das Terminal? 🤔

In vielen Fällen wirst du auch mit einer graphischen Oberfläche zu deinem Ziel kommen und brauchst überhaupt kein Terminal. Dennoch lohnt es sich einige Befehle in der Kommandozeile zu beherrschen.

In der Developer Community ist das Benutzen des Terminals Standard. Möchtest du z.B. npm Packages installieren, dann geht das nur über das Terminal. Außerdem willst du sicher dein Projekt versionieren und z.B. Git und Github dafür nutzen – auch das funktioniert über Befehle in der Kommandozeile.

Was genau ist das "Terminal" überhaupt? 🤔

Das Terminal ist auf Unix-basierten System (z.B. Mac und Linux) das "Sprachrohr" zum Betriebsystem. Mit einfachen Texteingaben lassen sich Kommandos an das OS (Operating System) übermitteln und werden entsprechend ausgeführt.

An dieser Stelle der Hinweis, dass sich dieses Tutorial speziell an Mac-User richtet. Wenn du Windows benutzt, dann kannst du gerne die "Linux Bash" für Windows verwenden. Die Befehle sollten entsprechend die gleichen sein mit Ausnahme der Mac-spezifischen Tastenkombinationen.

Erste Schritte mit dem Terminal 🦶

Als erstes startest du das Terminal. Am einfachsten geht das über die Schnellsuche des Macs. Öffne dazu mit CMD ⌘ + Leertaste das Suchfeld, gebe "Terminal" ein und öffne das Programm.

Wundere dich nicht wenn dein Terminal etwas anders aussieht als meines. Das ist normal und liegt daran, dass sich das Aussehen durch Einstellungen anpassen lässt.

Sicher bist du es gewohnt mit dem Explorer oder Finder durch Verzeichnisse zu navigieren. Mit dem Terminal kannst du das ebenfalls. Bevor du starten kannst, musst du erst mal wissen welche Ordner überhaupt vorhanden sind. Verwende dazu den Befehl ls. Dieser zeigt dir alle Inhalte des Verzeichnisses an. Das sieht dann in etwa so aus:

ls

Jetzt kannst du in ein weiteres Unterverzeichnis navigieren. Das funktioniert mit dem Kommando cd und steht für Change Directory. Außerdem musst du noch das Verzeichnis ergänzen in welches du wechseln möchtest. Ein Beispiel:

cd k_tuts

In meinem Beispiel bin ich nun in k_tuts navigiert. Übrigens, solltest du mal die Orientierung verlieren hilft dir der Befehl pwd und zeigt dir das aktuelle Verzeichnis indem du dich befindest. Du möchtest wieder zurück? Kein Problem!

cd ..

Mit cd .. navigierst du wieder eine Verzeichnisebene zurück.

Node & npm

Wenn du mit Node.js arbeitest (und Node installiert hast) dann bekommst du gleichzeitig npm, den Package Manager für Javascript gleich mitinstalliert. Mit diesem kannst du zahlreiche Programme installieren. Npm ist sowas wie das Schweizer 🇨🇭 Taschenmesser für Javascirpt-Entwickler:innen.

Lass uns gleich zum Einstieg npm und Node Befehle nutzen, die super hilfreich sind für dein erstes Node-Projekt. Navigiere dazu in ein Verzeichnis deiner Wahl und erstelle einen neuen Projektordner mit

mkdir meinprojekt

Jetzt springe in den Ordner mit

cd meinprojekt

Wir werden gleich ein Node-Projekt initialisieren und mit npm das Express Framework installieren. Damit kannst du super einfach einen Webserver erstellen. Wie das genau funktioniert, habe ich übrigens hier für dich zusammengefasst.

Lass uns ein Node Projekt erstellen:

npm init -y

Mit init wird da Projekt initialisiert und die Option -y ergänzt Standardwerte für die package.json, die im Hintergrund generiert wird. Die Datei enthält Meta-Informationen über das Projekt. So werden z.B. alle Packages (Erweiterungen) die du installierst, inklusive der Versionsnummer, in dieser Datei aufgeführt. Hier ein Beispiel:

{
  "name": "howto_webserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Als nächstes geht es darum ein solches Package zu installieren. Hierfür verwendest du den Befehl npm install gefolgt von dem Paketnamen. Für das Package Express, welches du jetzt installierst, sieht der Befehl so aus:

npm install express

Sollte deine Installation erfolgreich gewesen sein, müsste sich deine package.json, wie in dem Beispiel unten, um das Objekt dependencies erweitert haben.

{
  "name": "howto_webserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Ergänzend zum install Befehl, solltest du noch analog uninstall kennen um ein Package wieder zu deinstallieren. Die Befehlskette ist die gleiche wie bei der Installation.

Git

Als professionelle:r Entwickler:in kommst du an Git nicht vorbei. Mit Git können mehrere Programmierer:innen an einem Projekt arbeiten ohne ein wildes durcheinander. Das anfänglich Schwierige an Git ist gar nicht die Syntax oder Schreibweise, als viel mehr den "Flow", also die Abläufe richtig zu verstehen.

Die gute Nachricht für dich: Zu Beginn arbeitest du noch meist allein und brauchst dir keine Gedanken machen um Dinge wie Code-Konflikte oder ähnliches. Für dich geht es erstmal darum deinen Code zu "commiten" (speichern).  Ein Hinweis noch an dieser Stelle – hierbei handelt es sich nicht um ein umfangreiches Git-Tutorial. Du sollst lediglich einen Einblick bekommen wie du Terminal Befehle im Git-Kontext verwenden kannst.

Bevor es richtig los geht, checke zunächst ob du Git bereits auf deinem Mac installierst hast. Ab MacOS 10.9 ist nämlich Git schon dank XCode (Apple Entwickler-Tool) vorinstalliert. Prüfe dazu die Version von Git mit:

git --version

Falls du eine Versionsnummer zurückbekommst – großartig. Dann kann es los gehen. Navigieren nun in dein Projekt und gebe folgenden Befehl ins Terminal ein:

git init

Damit wird Git für dieses Projekt initialisiert. Checke nun ob git bereits Änderungen erfasst hat mit:

git status

Du solltest eine Nachricht zurückbekommen die dir sagt, dass git Dateien gefunden hat die noch nicht erfasst werden. Bei mir sieht das so aus:

Außerdem sagt dir Git was du machen kannst um die Dateien für das Tracking aufzunehmen (use "gut add <file>..."). Damit kannst du jede einzelne Datei bzw. jeden einzelnen Ordner hinzufügen. Nehmen wir an du willst die index.js tracken:

git add index.js

Wenn du jetzt erneut git status aufrufst, solltest du eine Veränderung feststellen:

Die index.js wird jetzt für das Tracking berücksichtigt. Möchtest du alle Dateien auf einmal hinzufügen, dann kannst du das mit:

git add .

Prüfe erneut mit git status ob alle Dateien bereit sind für den ersten Commit. Ein Commit ist so etwas wie ein Speichervorgang. Nachdem du die Dateien und Ordner für das Speichern bestätigt hast, kannst du jetzt commiten.

git commit -m "mein erster commit"

Bei Commits ist es üblich zusätzlich eine Nachricht mitzugeben. Das macht Sinn, damit du später aus der Vielzahl deiner Commits den Überblick behältst und weißt, was du genau bei einem spezifischem Commit gemacht hast.

Shortcuts & Befehle

Abschließend noch drei Shortcuts bzw. Befehle die du kennen solltest:

1. Nutze tab für Autovervollständigungen – das spar Zeit und Nerven!
2. Mit dem Befehl clear kannst du den Terminal Screen leeren – behalte den Überblick!
3. ↑ Mit der Pfeiltaste nach oben (mehrfach drücken) kannst du durch alle zur eingegeben Befehle switchen – auch hier sparst Zeit und damit eine Menge Tipparbeit

Fazit ✔️

Ohne das Terminal wird es schwer. Als Entwickler:in solltest du die Basics beherrschen um z.B. mit Node, npm oder Git umgehen zu können. Dafür brauchst du Befehle nicht auswendig lernen – schreibe dir z.B. dein eignes Cheatsheet.

Wie geht es weiter? Falls du deine Kenntnisse im Umgang mit dem Terminal gleich anwenden möchtest, empfehle ich dir diesen Beitrag. Hier erfährst du wie du mit NodeJS und Express deinen eigenen Webserver erstellst.

Hast du Fragen, oder fehlt etwas in diesem Beitrag? Dann schreibe mir auf Twitter. Danke fürs Lesen!