IDEA.
Got a brilliant idea to change the world? Share it with the community!
The brief.
01 · BACKGROUNDNotes
YouTube Demo: https://youtu.be/b9anQUH0tCA
Live Demo: https://webanwendung-client.herokuapp.com/
Hinweis: Diese App wird mit dem Free-Plan von Heroku gehostet, demnach kann es zu langen Ladezeiten kommen.
A. Installationsanleitung
A.1 Docker Installation
Meine Webanwendung kann mithilfe von Docker ausgeführt werden.
Docker benötigt im Hintergrund eine VM, um zu funktionieren. Bei Mac ist es HyperKit, bei Windows Hyper-V. Hyper-V ist nicht in allen Windows Versionen enthalten, somit unterscheidet sich das Installationsverfahren zwischen Betriebssystemen.
Windows 10 64-Bit: Pro, Enterprise, Education sowie MacOS
Downloaden und installieren Sie Docker-Desktop
Docker Desktop startet nach der Installation nicht automatisch. Um Docker Desktop zu starten, Suchen Sie nach Docker auf ihrem System und wählen Sie Docker Desktop in den Suchergebnissen.
Wenn der Wal in der Statusleiste sich nicht mehr bewegt läuft Docker erfolgreich.
Docker ist von jedem Terminal im System zugänglich.
Fahren Sie mit "A.2 Webanwendung ausführen (Docker Desktop)" fort.
Windows Home und Systeme ohne Microsoft Hyper-V
- Downloaden und installieren Sie Docker Toolbox
- Nach der Installation steht ein "Docker Quickstart Terminal" Icon auf dem Desktop zu Verfügung.
- Starten Sie Docker-Toolbox über diese Verknüpfung.
- Das Terminal führt verschiedene Schritte aus, um Docker Toolbox für Sie einzurichten. Wenn dies erledigt ist, zeigt das Terminal die
$Eingabeaufforderung an. - Fahren Sie mit "A.3 Webanwendung ausführen (Docker Toolbox)" fort.
A.2 Webanwendung ausführen (Docker Desktop)
Klonen sie das Projekt vom Github.
git clone https://github.com/felixkeller98/webanwendung.gitNavigieren Sie in das webanwendung-Verzeichnis.
cd webanwendung/Führen Sie den Build-Befehl von docker-compose aus. Dies kann einige Minuten dauern.
docker-compose buildFühren sie nun das Projekt aus.
docker-compose upSobald Server, Client und Datenbank eingerichtet wurden, können Sie
[localhost:3000](http://localhost:3000)im Browser aufrufen, um mit der Webanwendung zu interagieren.
A.3 Webanwendung ausführen (Docker Toolbox)
Klonen sie das Projekt vom GitHub
git clone https://github.com/felixkeller98/webanwendung.gitNavigieren Sie in das client-Verzeichnis
cd webanwendung/client/Öffnen Sie die package.json Datei in einem beliebigen Texteditor.
In der package.json, stellen Sie sicher, dass "proxy" entsprechend eingerichtet ist.
"proxy": "http://192.168.99.100:9000",Im Docker-Quickstart-Terminal, navigieren Sie in das webanwendung-Verzeichnis.
Führen Sie den Build-Befehl von docker-compose aus. Dies kann einige Minuten dauern.
docker-compose buildFühren sie nun das Projekt aus.
docker-compose upSobald Server, Client und Datenbank eingerichtet wurden, können Sie
192.168.99.100:3000im Browser aufrufen, um mit der Webanwendung zu interagieren.