VueJS und GoLang

marc-o

Die Go-Anwendungen werden häufig mit dem Internen Vorlagensystem erstellt, welches für statische Webseiten sehr gut ist, sobald dynmic ins Spiel kommt, muss wieder mit Client-Bibliotheken gearbeitet werden. Daher wollte ich nun ein System aufbauen, bei dem die Client-Seite komplett mit VueJS entwickelt wird und im Backend, für die APIs, Go verwendet wird. Damit nun so eine Anwendung als als Single-Datei funktioniert, sind ein paar Einstellungen und Strukturen zu beachten.

Vorbereitung

Zuerst gehen wir auf die notwendige Software und Erweiterungen ein, mit denen das Programmierleben vereinfacht wird.

Software Beschreibung Arch-Linux
Visual Studio Code Editor und Projektverwaltung pacman -S code
NodeJS + npm/yarn Entwicklungsgrundstock für VueJS (ob npm oder yarn soll jeder selbst entscheiden) pacman -S nodejs npm yarn
GoLang Compiler für Go pacman -S go
make Make-Dateien für einfachere Ausführung pacman -S make
docker Container zum einfach erzeugen von z.B. DB-Server yay -S docker
migrate Vereinfachte migration von Datenbanken [Download][1]

Und die nachfolgenden Erweiterung, um z.B. eine bessere Unterstützung im Editor für Syntax-Hightlighting, IntelitySense, Code-Formatierung und weiteres zu bekommen:

Erweiterung Software
Veture (für VueJS) Visual Studio Code
Go for Visual Studio Code Visual Studio Code
Vue.js devtools Browser (Chrome, Brave, Opera)

Nun installieren wir noch die cli für VueJS, um das erstellen der Projekte deutlich zu vereinfachen:

# Installieren
npm install -g @vue/cli
# oder
yarn global add @vue/cli

# Version prüfen
vue --version

# Aktualisieren
npm update -g @vue/cli
# oder
yarn global upgrade --latest @vue/cli

Go Projekt erstellen

TODO: Hier das erstellen hin mit Beschreibung des Aufbaus + MAKEFILE

TODO: Beginnen mit den aufbau der ersten API-Aufrufe ohne DB

TODO: Migrations + Docker (Und die Tücken des SuperUsers => Verweis FAQ) und Anpassung MAKEFILE + Umstellung im Code

VueJS Projekt erstellen

Mit der cli kann das Projekt direkt erzeugt werden. Wer es mag, kann es auch über die Web-UI erstellen. Hier wird der Weg über die cli gezeigt, welcher auch auf die Web-UI übernommen werden kann.

# Startet die in VueJS geschriebene Projektverwaltung
vue ui
# Erstelle ein neues Standardprojekt
vue create <new_name>
  • <new_name> durch einen sprechenden Namen ersetzen, typischerweise nennen wir es hier frontend und erzeugen es innerhalb des Go-Projektes
  • Manually select features
  • Notwendige Features:
    • Choose Vue version
    • Babel
  • Weiere Features mit Beschreibung:
    • Router: Notwendig für Seitenumschaltungen als SinglePage Application
    • Vuex: Globaler Statusmanager
    • CSS Pre-processors: Verwendung von SASS-Dateien
    • Linter / Formatter: Automatische Formatierung und Syntax-Prüfung
    • Unit Testing: Framework für Komponententests
    • E2E Testing: End-to-End-testing
  • 3.x
  • In dedicated config files
  • Speicherung für nachfolgende Projekt kann selbst entschieden werden
  • Sollte die Abfrage noch kommen welcher Packetmanager verwendet werden soll, dann bitte den gewünschten auswählen

Danach wird das Projekt erzeugt und alle notwendigen Packet heruntergeladen und im Projekt erstellt. Danach kann das Projekt mit nachfolgenden Aufruf gestartet werden.

cd frontend
yarn serve
# oder
npm run serve

Typischerweise findet man nun unter http://localhost:8080/ die erstellte Beispielseite. Mit dem oben genannten Aufruf wird der Server mit Hot Reload gestartet. Diese bedeutet, dass bei einer Änderungen in den Quelldateien nach dem speichern die Seite im Browser automatisch aktualisiert wird. Dadurch kann man nun den Code direkt bearbeiten und sieht sofort im Webbrowser die entsprechenden Änderungen.

TODO: Erstellung von RestAPI-Abfragen

TODO: Einbindung von json-testserver und dem proxy für die Entwicklungsumgebung => Was auch gut für die Integration ist

Einbindung von VueJS in Go

TODO: Anpassungen in Go um die Dateien als embeded aufzunehmen

TODO: Anpassung MAKEFILE das beim Build erstmal das VueJS-Projekt erstellt wird und danach Go gebaut wird

FAQ

TODO: Proxy für VueJS, und zeigen wie man die 2 Projekte mit dem jeweiligen Tool starten kann

TODO: Docker Einstellungen im Sinne des SU-Problems

VueJS GoLang