Veröffentliche deine React-App mit GitHub und Vercel

In dieser Anleitung lernen Sie, wie Sie ihre React-Anwendung (wie z.B. unsere Buchfavoriten App) auf GitHub speichernund anschliessend mit Vercel öffentlich zugänglich machen. Dieser Prozess, auch “Deployment” genannt, macht Ihre App im Internet verfügbar, sodass sie von jedem genutzt werden kann. Die Anleitung führt dich Schritt für Schritt durch den gesamten Prozess - vom Erstellen eines GitHub-Repositories bis zum automatischen Deployment über Vercel.

Teil 1: GitHub-Repository erstellen und Code hochladen

Schritt 1: GitHub-Repository erstellen

1. Gehe zu https://github.com/ und melde dich an 2. Klicke auf den Button “New”, um ein neues Repository zu erstellen 3. Gib einen Namen für dein Repository ein (z.B. “meine-react-app”) 4. Wähle “Public” oder “Private” (für kostenlose Vercel-Nutzung ist beides möglich) 5. Klicke auf “Create repository”

Schritt 2: Lokales Git-Repository initialisieren

Öffne ein Terminal in deinem Projektordner und führe folgende Befehle aus:

git init
git add .
git commit -m "Erstes Commit"

Schritt 3: GitHub-Repository mit deinem lokalen Projekt verbinden

Führe im Terminal die Befehle aus, die GitHub nach der Repository-Erstellung anzeigt:

git remote add origin https://github.com/dein-username/meine-react-app.git
git branch -M main
git push -u origin main

Teil 2: Deployment auf Vercel

Schritt 1: Bei Vercel anmelden

1. Gehe zu https://vercel.com/ 2. Klicke auf “Sign Up” 3. Wähle “Continue with GitHub” für eine einfache Verknüpfung

Schritt 2: Neues Projekt erstellen

1. Nach dem Login, klicke auf “Add New…” und wähle “Project” 2. Vercel zeigt dir deine GitHub-Repositories - wähle “meine-react-app” 3. Klicke auf “Import”

Schritt 3: Projektkonfiguration

1. Vercel erkennt automatisch, dass es sich um eine React-App handelt 2. Framework Preset: - Für Create React App: “Create React App” (automatisch erkannt) - Für Vite: “Vite” (automatisch erkannt) 3. Build-Einstellungen: Die Standardwerte passen meistens, keine Änderung nötig 4. Klicke auf “Deploy”

Schritt 4: Fertig!

• Nach kurzer Zeit ist deine App live unter einer URL wie: meine-react-app.vercel.app
• Jeder Push zu deinem GitHub-Repository löst automatisch ein neues Deployment aus

Weitere Änderungen veröffentlichen

Wenn du Änderungen an deiner App vornimmst:

git add .
git commit -m "Beschreibung deiner Änderungen"
git push

Vercel erkennt den neuen Commit automatisch und deployed deine App neu!

Tipps:

• Unter “Settings” > “Domains” können Sie eine eigene Domain einrichten
• Bei Problemen schaue in die Build-Logs unter dem “Deployments”-Tab
• Umgebungsvariablen (API-Keys etc.) können Sie unter “Settings” > “Environment Variables” hinzufügen

Schlusswort

Glückwunsch! Die Buchfavoriten App ist nun fertiggestellt und einsatzbereit. Dieses Projekt demonstriert erfolgreich, wie moderne React-Konzepte wie Hooks, Context API und Routing in einer realen Anwendung eingesetzt werden können.

Während der Entwicklung haben Sie wichtige Techniken kennengelernt, von der Projektstrukturierung über Komponenten-Design bis hin zur API-Integration und Deployment. Die App bietet eine solide Grundlage, die Sie je nach Bedarf erweitern kannst – etwa durch zusätzliche Features wie Benutzerkonten, Bewertungen oder fortgeschrittene Suchfunktionen.

Viel Spass beim Nutzen, Teilen und Weiterentwickeln der Buchfavoriten App!