GAMING GILDE Web

Das Repository der Website der GAMING GILDE.

Ursprünglich verwendete Entwicklungsumgebung (IDE):

• 

Als Alternative empfehle ich eine der folgenden IDEs:

• 
• 

Dieses Dokument beschreibt in Kürze die notwendigen Schritte, um die Website zu erstellen und zu veröffentlichen.

Voraussetzungen

Stelle sicher, dass du immer die aktuellsten Versionen der folgenden Komponenten installiert hast (Git ist hier optional):

Aktuell installierte Versionen können im Terminal der verwendeten IDE mit folgenden Befehlen ausgegeben werden:

node -v, npm -v, git -v und next -v

Mit dem Aufruf des Befehls github wird die aktuell installierte Version von GitHub Desktop geöffent.
Wähle darin das Menü 'Help' -> 'About GitHub Desktop', dann 'Check for Updates' und installiere etwaige Aktualisierungen.

Besonderheit:
Next.js kommt via npm als Dependency mit und wird automatisch mit npm installiert. Es muss nicht separat installiert werden. Bei einem etwaigen Upgrade auf eine neuere Version muss lediglich darauf geachtet werden ("am Besten Testen"), dass die neue Version kompatibel ist.

Repository klonen

Verwende folgenden Befehl im Terminal, um sich den aktuellen Stand der Website lokal zu klonen:

git clone https://github.com/GAMINGGILDE/GAMING-GILDE-Web.git gaming-gilde-web
cd gaming-gilde-web

Abhängigkeiten installieren

Um sich die benötigten Dependencies von npm in sein Projekt zu installieren, führe folgenden Befehl im Terminal aus:

npm install

Besteht schon ein lokal geklontes Repository, können die Dependencies zu npm mit folgendem Befehl aktualisiert werden:

npm update

Tipp: Mit dem Terminal Befehl: npm list können die Versionen aller bestehenden Dependencies ausgegeben werden.

Renovate Bot

Renovate Bot ist eine GitHub-App die automatisch Abhängigkeiten in Repositories aktualliert, indem Paketdateien erkannt und bei neuen Versionen selbstständig Pull Requests erstellt:

• 

Installation und Verwendung dringend empfohlen.

Testing

Mit folgendem Terminal-Befehl kann ein lokaler Webserver gestartet werden, mit dem die Website via Browser-Vorschau überprüft werden kann:

npm run dev

Der lokale Webserver kann via [STRG]+[C] wieder beendet werden.

Build-Prozess

Um die Webseite via Next.js erstellen zu lassen, muss dieser Befehl eingegeben werden:

npm run build

Die fertige Webseite wird im Projekt im Ordner 'out' gespeichert.

Deployment

Lade den Inhalt des Ordners 'out' auf deinen Webspace. Ich verwende dazu FileZilla.
Alle Dateien im out-Ordner müssen auf den Server übertragen werden.

Sonstiges

Die für das Paket benötigten Dependencies und deren definierten bzw. benötigten Versionen sind in der Datei package.json im Hauptverzeichnis des Projekts aufgelistet. Dort können auch die Skripte für die Befehle npm run dev, npm run build und npm update hinterlegt sein.

Hilfe & Support

Bei Fragen zur Technik oder Verwendung sind hier die betreffenden Anlaufstellen zur Recherche:

• 
• 
• 
• 
• 
• 

Off-Topic: Tipps zum Editieren

Beispiel-Syntax zur Erstellung von Links zum Öffnen in neuem Tab:

<a href="https://zap-hosting.com/anticoronakartellbanner" target="_blank">Zap-Hosting</a>

<a className="text-primary hover:underline" href="https://zap-hosting.com/anticoronakartellbanner" target="_blank">20% Rabatt</a>

Beispiel zum Auskommentieren vom Java-Code (JSX-Specific Comment):

{/* <div className="sm:mx-10 lg:mx-20">
    <Carousel/>
</div> */}

Änderungen von GitHub abrufen (via Terminal):

git pull

Änderung auf GitHub hochladen/pushen (Commits, WebStorm spezifisch):

[STRG]+[K]

Regulärer Befehl im Terminal um Änderungen zum GitHub Repository zu übertragen:

git push