Zum Inhalt springen
BitDojo
Wie das Web funktioniert
GrundlagenKostenlos14 Min. Lesezeit

Die Werkzeuge einrichten

Du hast Editor, Terminal, Node und Git eingerichtet, kannst dich im Terminal bewegen und hast ein erstes eigenes Projekt gestartet.

Bis hierher war der Kurs Lesestoff. Ab jetzt brauchst du eine Umgebung, in der du selbst etwas tun kannst.

Vier Werkzeuge genügen. Alles andere kommt später und dann aus einem konkreten Bedarf heraus, nicht aus einer Liste.

Das Terminal

Ein Fenster, in das man Befehle tippt. Es sieht abweisend aus und ist das schnellste Werkzeug, das du haben wirst.

Du brauchst am Anfang fünf Befehle. Mehr wirklich nicht.

Befehl Was er tut
pwd zeigt, in welchem Ordner du gerade bist
ls listet auf, was in diesem Ordner liegt
cd name wechselt in den Ordner name
cd .. geht einen Ordner nach oben
mkdir name legt einen Ordner an

Auf Windows heißt ls in PowerShell auch ls, und pwd funktioniert ebenfalls. Wer auf die alte Eingabeaufforderung stößt, sieht dort dir statt ls.

Der Editor

Lade ihn von code.visualstudio.com. Nach der Installation lohnen sich genau drei Einstellungen, und alle drei sparen später Ärger.

Erstens: automatisches Speichern einschalten. Sonst siehst du eine Änderung im Browser nicht und suchst eine Stunde nach einem Fehler, den es gar nicht gibt.

Zweitens: den Editor auch über das Terminal aufrufen können. Beim ersten Start bietet Visual Studio Code an, den Befehl code einzurichten. Nimm das an. Dann öffnet code . den aktuellen Ordner.

Drittens: eine Erweiterung für einheitliche Formatierung, üblicherweise Prettier. Sie beendet die Diskussion über Einrückungen, bevor sie anfängt.

Node

Installiere die Fassung mit der geraden Nummer, also die mit langfristiger Unterstützung. Prüfe danach im Terminal:

node --version
npm --version

Kommen zwei Versionsnummern, ist es richtig. Kommt "Befehl nicht gefunden", schließe das Terminal und öffne es neu, denn die Änderung am Suchpfad greift erst in einem neuen Fenster.

Git

Git hast du im Kapitel über die Auslieferung schon kennengelernt. Jetzt wird es eingerichtet.

Nach der Installation von git-scm.com sagst du Git einmalig, wer du bist. Das steht später in jedem Commit.

git config --global user.name "Dein Name"
git config --global user.email "deine@adresse.de"
git config --global init.defaultBranch main

Die dritte Zeile spart eine Warnung bei jedem neuen Projekt.

Der erste Lauf

Jetzt bringst du alles zusammen. Im Terminal:

mkdir erstes-projekt
cd erstes-projekt
npm init -y
code .

Vier Zeilen: Ordner anlegen, hineinwechseln, eine Projektdatei erzeugen, den Editor öffnen. In der Datei package.json, die dabei entstanden ist, steht der Name des Projekts und später jede Abhängigkeit.

Wenn etwas nicht geht

Drei Regeln, die dir viel Zeit sparen.

Lies die Fehlermeldung zu Ende. Die meisten sagen genau, was fehlt. Der Reflex, sie wegzuklicken und die Frage zu stellen, kostet mehr Zeit als das Lesen.

Wenn du eine Meldung nicht verstehst, suche mit dem wörtlichen Text danach, in Anführungszeichen. Nimm dabei die Teile heraus, die nur bei dir vorkommen, also Pfade und Namen.

Und wenn du gar nicht weiterkommst: Schließe das Terminal, öffne es neu und probiere es noch einmal. Bei Installationen, die den Suchpfad ändern, ist das erstaunlich oft die ganze Lösung.

Übungetwa 60 Minuten

Die Umgebung einrichten und beweisen, dass sie läuft

Am Ende dieser Übung hast du eine Umgebung, mit der du den Rest des Kurses bearbeiten kannst.

  1. Installiere Visual Studio Code, Node in der Fassung mit langfristiger Unterstützung und Git.
  2. Öffne ein neues Terminal und prüfe alle drei: node --version, npm --version, git --version.
  3. Richte Git mit deinem Namen und deiner Adresse ein, wie oben gezeigt.
  4. Lege einen Ordner erstes-projekt an, wechsle hinein und führe npm init -y aus.
  5. Öffne den Ordner im Editor und lege eine Datei index.html an mit einer Überschrift deiner Wahl.
  6. Starte einen lokalen Server: npx serve . und öffne die angezeigte Adresse im Browser.
  7. Ändere die Überschrift, speichere, lade die Seite neu.
  8. Halte den Stand fest: git init, git add ., git commit -m "Erste Fassung".

Notiere dir die Ausgabe der drei Versionsabfragen. Wenn du später um Hilfe bittest, ist das die erste Frage, die dir gestellt wird.

Fertig, wenn

  • Alle drei Versionsabfragen liefern eine Nummer.
  • Deine Seite ist unter einer lokalen Adresse im Browser zu sehen.
  • Eine Änderung an der Überschrift ist nach dem Neuladen sichtbar.
  • `git log` zeigt mindestens einen Eintrag mit deinem Namen.

Sitzt es?

8 Karten aus dieser Lektion, 6 Aufgaben im Prüfungsvorrat.