1. Erste Schritte

1.4 Das erste Projekt, Schritt für Schritt

Ein vollständiger Durchgang in zehn Minuten: ein Projekt erstellen, starten, im Browser ansehen und im Editor öffnen.

In der App: «Neues Projekt»

Kurz gesagt

  • Ein vollständiges Beispiel: eine kleine TypeScript-Website mit Vite, von der Erstellung bis zum Browser.
  • Du brauchst nur die Komponente Node.js, die das Kit selbst installiert, wenn sie fehlt, und eine Internetverbindung.
  • Am Ende weißt du, wie du ein Projekt erstellst, startest, im Browser öffnest und im Editor bearbeitest.

1. Erstelle das Projekt

  1. Öffne die Seite „Projekte“ über die Aktivitätsleiste.
  2. Klicke in der „Schnellübersicht“ unter „Neues Projekt“ im Block „Web“ auf „Vite“ (unter „Web mit JavaScript und TypeScript“). Der Tab „Neues Projekt“ öffnet sich.
  3. In „1. Basis“ ist die Karte „Vite“ („Website oder Webanwendung in TypeScript“) bereits ausgewählt.
  4. In „2. Ergänzungen“ brauchst du für diesen Versuch nichts.
  5. Gib in „3. Name“ primo-sito ein. Der Name wird zum Ordner projects\primo-sito.
  6. Sieh dir die „Zusammenfassung“ an: Du siehst, dass das Kit Node.js verwendet, npm create vite im Ordner projects und dann npm install im Projekt ausführt und die Aktionen „Starten“ und „Build“ speichert.
  7. Klicke auf „Projekt erstellen“. Im Teil „Fortschritt“ laufen die Befehle und ihre Ausgabe durch.
  8. Wenn „Projekt primo-sito erstellt.“ erscheint, klicke auf „Projekt öffnen“.

2. Starte es und öffne es im Browser

  1. Die Seite des Projekts öffnet sich im Abschnitt „Start“. Unten zeigt die Liste „Aktionen“, was das Projekt kann: die aus der Datei package.json erkannten Aktionen (npm run dev, npm run build, npm install) und die aus dem Rezept (Starten, Build).
  2. Klicke auf ▶ neben „npm run dev“. Es ist eine Web-Aktion: Das Kit weist ihr einen Port zu, startet sie und wartet, bis sie antwortet. Der Status wechselt von „startet“ zu „lauscht“.
  3. Klicke auf „Im Browser öffnen“: Die Beispielseite von Vite öffnet sich unter http://localhost:<port>/, wobei der Port eine Zahl zwischen 7100 und 7999 ist, die das Kit wählt und bei jedem Start beibehält.
  4. Soll die große Schaltfläche „Starten“ oben immer diese Aktion starten? Wähle sie aus und klicke auf den Stern „Standard“.

3. Bearbeite es im Editor

  1. Klicke oben auf der Seite des Projekts auf „Editor“. Das Kit startet den Editor (beim ersten Mal kann das einige Sekunden dauern) und öffnet ein Atollo-Fenster mit dem Projektordner.
  2. Öffne src/main.ts, ändere einen Text und speichere mit Ctrl+S.
  3. Wechsle zurück zum Browser: Vite aktualisiert die Seite von selbst.
  4. Um die Website zu beenden, wechsle zurück zu Atollo und klicke auf „Beenden“ (oder ■ neben der Aktion). Wenn du Atollo schließt, wird ohnehin alles beendet.

Und jetzt?