• Stars
    star
    116
  • Rank 303,894 (Top 6 %)
  • Language Vue
  • License
    MIT License
  • Created over 6 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Simple Golang and Vue.js SPA demo for deploying to Azure, Docker etc

Go & Vue.js - Demo Web Application

This is a simple web application with a Go server/backend and a Vue.js SPA (Single Page Application) frontend.

The app has been designed with cloud native demos & containers in mind, in order to provide a real working application for deployment, something more than "hello-world" but with the minimum of pre-reqs. It is not intended as a complete example of a fully functioning architecture or complex software design.

Typical uses would be deployment to Kubernetes, demos of Docker, CI/CD (build pipelines are provided), deployment to cloud (Azure) monitoring, auto-scaling

  • The Frontend is a SPA written in Vue.js 3. It uses Bootstrap 5 and Font Awesome. In addition Gauge.js is used for the dials in the monitoring view
  • The Go component is a Go HTTP server based on the std http package and using gopsutils for monitoring metrics, and Gorilla Mux for routing

Features:

  • System status / information view
  • Geolocated weather info (from OpenWeather API)
  • Realtime monitoring and metric view
  • Support for user authentication with Azure AD and MSAL
  • Prometheus metrics
  • API for generating CPU load, and allocating memory

Status

Live instance:

Repo Structure

/
├── frontend         Root of the Vue.js project
│   └── src          Vue.js source code
│   └── tests        Unit tests
├── deploy           Supporting files for Azure deployment etc
│   └── kubernetes   Instructions for Kubernetes deployment with Helm
├── server           Go backend server
│   └── cmd          Server main / exec
│   └── pkg          Supporting packages
├── build            Supporting build scripts and Dockerfile
└── test             API / integration tests

Server API

The Go server component performs two tasks

  • Serve the Vue.js app to the user. As this is a SPA, this is static content, i.e. HTML, JS & CSS files and any images. Note. The Vue.js app needs to be 'built' before it can be served, this bundles everything up correctly.
  • Provide a simple REST API for data to be displayed & rendered by the Vue.js app. This API is very simple currently has three routes:
    • GET /api/info - Returns system information and various properties as JSON
    • GET /api/monitor - Returns monitoring metrics for CPU, memory, disk and network. This data comes from the gopsutils library
    • GET /api/weather/{lat}/{long} - Returns weather data from OpenWeather API
    • GET /api/gc - Force the garbage collector to run
    • POST /api/alloc - Allocate a lump of memory, payload {"size":int}
    • POST /api/cpu - Force CPU load, payload {"seconds":int}

In addition to these application specific endpoints, the following REST operations are supported:

  • GET /api/status - Status and information about the service
  • GET /api/health - A health endpoint, returns HTTP 200 when OK
  • GET /api/metrics - Returns low level system and HTTP performance metrics for scraping with Prometheus

Building & Running Locally

Pre-reqs

  • Be using Linux, WSL or MacOS, with bash, make etc
  • Node.js Go 1.16+ - for running locally, linting, running tests etc
  • cosmtrek/air - if using make watch-server
  • Docker - for running as a container, or image build and push
  • Azure CLI - for deployment to Azure

Clone the project to any directory where you do development work

git clone https://github.com/benc-uk/vuego-demoapp.git

Makefile

A standard GNU Make file is provided to help with running and building locally.

help                 💬 This help message
lint                 🔎 Lint & format, will not fix but sets exit code on error
lint-fix             📜 Lint & format, will try to fix errors and modify code
image                🔨 Build container image from Dockerfile
push                 📤 Push container image to registry
run                  🏃 Run BOTH components locally using Vue CLI and Go server backend
watch-server         👀 Run API server with hot reload file watcher, needs cosmtrek/air
watch-frontend       👀 Run frontend with hot reload file watcher
build-frontend       🧰 Build and bundle the frontend into dist
deploy               🚀 Deploy to Azure Container Apps
undeploy             💀 Remove from Azure
test                 🎯 Unit tests for server and frontend
test-report          🎯 Unit tests for server and frontend (with report output)
test-snapshot        📷 Update snapshots for frontend tests
test-api             🚦  Run integration API tests, server must be running
clean                🧹 Clean up project

Make file variables and default values, pass these in when calling make, e.g. make image IMAGE_REPO=blah/foo

Makefile Variable Default
IMAGE_REG ghcr.io
IMAGE_REPO benc-uk/vuego-demoapp
IMAGE_TAG latest
AZURE_RES_GROUP temp-demoapps
AZURE_REGION uksouth
  • The server will listen on port 4000 by default, change this by setting the environmental variable PORT
  • The server will ry to serve static content (i.e. bundled frontend) from the same directory as the server binary, change this by setting the environmental variable CONTENT_DIR
  • The frontend will use /api as the API endpoint, when working locally VUE_APP_API_ENDPOINT is set and overrides this to be http://localhost:4000/api

Containers

Public container image is available on GitHub Container Registry

Run in a container with:

docker run --rm -it -p 4000:4000 ghcr.io/benc-uk/vuego-demoapp:latest

Should you want to build your own container, use make image and the above variables to customise the name & tag.

Kubernetes

The app can easily be deployed to Kubernetes using Helm, see deploy/kubernetes/readme.md for details

Running in Azure App Service (Linux)

If you want to deploy to an Azure Web App as a container (aka Linux Web App), a Bicep template is provided in the deploy directory

For a super quick deployment, use make deploy which will deploy to a resource group, temp-demoapps and use the git ref to create a unique site name

make deploy

Config

Environmental variables

  • WEATHER_API_KEY - Enable the weather feature with a OpenWeather API key
  • PORT - Port to listen on (default: 4000)
  • CONTENT_DIR - Directory to serve static content from (default: .)
  • AUTH_CLIENT_ID - Set to a Azure AD registered app if you wish to enable the optional user sign-in feature

Optional User Sign-In Feature

The application can be configured with an optional user sign-in feature which uses Azure Active Directory as an identity platform. This uses wrapper & helper libraries from https://github.com/benc-uk/msal-graph-vue

If you wish to enable this, carry out the following steps:

  • Register an application with Azure AD, see these steps
  • Set the environmental variable AUTH_CLIENT_ID on the Go server, with the value of the client id. This can be done in the .env file if working locally.
  • Optional when testing/debugging the Vue.js SPA without the Go server, you can place the client-id in .env.development under the value VUE_APP_AUTH_CLIENT_ID

GitHub Actions CI/CD

A set of GitHub Actions workflows are included for CI / CD. Automated builds for PRs are run in GitHub hosted runners validating the code (linting and tests) and building dev images. When code is merged into master, then automated deployment to AKS is done using Helm.

Updates

When What
Nov 2021 Rewrite for Vue.js 3, new look & feel, huge refactor
Mar 2021 Auth using MSAL.js v2 added
Mar 2021 Refresh, makefile, more tests
Nov 2020 New pipelines & code/ API robustness
Dec 2019 Github Actions and AKS
Sept 2019 New release pipelines and config moved to env vars
Sept 2018 Updated with weather API and weather view
July 2018 Updated Vue CLI config & moved to Golang 1.11
April 2018 Project created

More Repositories

1

kubeview

Kubernetes cluster visualiser and graphical explorer
Vue
941
star
2

k6-reporter

Output K6 test run results as formatted & easy to read HTML reports
EJS
394
star
3

workflow-dispatch

A GitHub Action for triggering workflows, using the `workflow_dispatch` event
TypeScript
322
star
4

icon-collection

Azure & Microsoft SVG Icon Collection
HTML
249
star
5

armview-vscode

Graphically display ARM templates in VS Code with an interactive map style view
TypeScript
143
star
6

python-demoapp

Simple Python Flask web application designed for running in containers for demos
JavaScript
139
star
7

dapr-store

Sample application showcasing the use of Dapr to build microservices based apps
Go
124
star
8

super-dungeon-delve

2D retro style dungeon game
GDScript
123
star
9

smilr

Microservices reference app showcasing a range of technologies, platforms & methodologies
JavaScript
99
star
10

chatr

Chat app using Azure Web PubSub, Static Web Apps and other Azure services
JavaScript
70
star
11

nodejs-demoapp

Sample Node.js web app for deploying to Azure, Kubernetes etc
JavaScript
54
star
12

htmx-go-chat

Chat app written in Go with HTMX and SSE
Go
45
star
13

msal-graph-vue

Vue.js sample app showing use of MSAL for authentication and calling MS Graph APIs
Vue
35
star
14

dotnet6-minimal

Quick and dirty minimal .NET 6 web app
C#
28
star
15

postman-prometheus

Run Postman collections continuously and export results as Prometheus metrics
JavaScript
28
star
16

dotnet-demoapp

.NET 6 demo web app for deploying to Azure, Docker etc
C#
27
star
17

kube-workshop

A hands-on workshop intended to get people comfortable in working with Kubernetes and deploying applications
26
star
18

touchmidi

Flexible HTML5 based touch based control surface for MIDI
JavaScript
25
star
19

armview-web

Standalone web version of github.com/benc-uk/armview-vscode
EJS
22
star
20

tools-install

Setup scripts for various dev tools, utilities, SDKs and CLI stuff
Shell
20
star
21

k6-prometheus-exporter

Export k6 metrics and load test data into Prometheus
Go
20
star
22

rayscale

Microservices based, distributed ray tracer designed to run in containers
TypeScript
20
star
23

go-rest-api

Boilerplate & template starter for creating a REST based HTTP microservice in Go
Go
19
star
24

bicep-iac

My set of Azure Bicep templates and modules
Bicep
17
star
25

pikube

Building a Kubernetes cluster on the Raspberry Pi
Python
16
star
26

hcl2-parser

HCLv2 parser for JavaScript
JavaScript
16
star
27

locust-reporter

Generate HTML reports from Locust load test output
Go
16
star
28

azure-arm

My ARM template library
Shell
14
star
29

batcomputer

A working example of DevOps & operationalisation applied to Machine Learning and AI
Python
13
star
30

gofract

Mandelbrot and Julia fractals rendered in real-time using Go
Go
13
star
31

keycloak-helm

Helm chart for Keycloak
Smarty
10
star
32

terraform-mgmt-bootstrap

Bootstrap core Azure state & resources using Terraform for use with Azure DevOps
HCL
9
star
33

serverless-cosmos-lab

Azure computer vision AI lab using LogicApps, Cognitive Services, CosmosDB and Web Apps
JavaScript
9
star
34

azure-functions

!! OLD PLEASE DON'T USE !! Demo and example Azure Functions in various languages
C#
9
star
35

kube-primer

Kubernetes Technical Primer
9
star
36

pod-kicker

A Kubernetes sidecar to watch for file changes and restart deployments and pods
Go
7
star
37

dotfiles

My personal dotfiles
Shell
7
star
38

aks-samples

Samples, feature demos and examples for Azure Kubernetes Service (AKS)
Shell
6
star
39

touchmidi-old

Flexible HTML5 based touch based control surface for MIDI
JavaScript
6
star
40

java-demoapp

Simple demo Java Spring Boot web app for deploying to Azure, Docker etc
Java
6
star
41

melkors-oubliette

A 3D dungeon crawler game inspired by Dungeon Master & Eye Of The Beholder
GDScript
6
star
42

devcontainers

Dockerfile
5
star
43

generative-music

Procedural and generative music tools and things
HTML
5
star
44

msal-graph-react

React sample app showing use of MSAL for authentication and calling MS Graph APIs
JavaScript
5
star
45

dart-raytracer

A raytracer written in Dart
Dart
4
star
46

goat-bot

Microsoft Bot Framework working example & demo - Goat Bot!
JavaScript
4
star
47

face-vision-app

Azure Cognitive Face/Vision APIs - Pure HTML5/JS Client
JavaScript
4
star
48

azure-samples

General collection of samples and snippets for Azure
PowerShell
4
star
49

csa-widgets

Dashboard Widgets for HP Cloud Service Automation
JavaScript
4
star
50

serverless-cognitive

Computer vision AI lab using Azure Functions and Cognitive Services
JavaScript
4
star
51

dungeon-game-old

C#
3
star
52

simple-slides

Simple slide presenter written in HTML5 & JS
HTML
3
star
53

angular-demoapp

Demo app written in Angular 4 using Node.js and Material Components
TypeScript
3
star
54

nanomon

Lightweight network and HTTP monitoring system, designed to be run with containers & Kubernetes
Go
3
star
55

azure-devops-core-docker

End to end DevOps exercise with .NET Core, Docker, VSTS in Azure
Batchfile
3
star
56

gsots3d

Library for building & rendering 3D stuff on the web
JavaScript
3
star
57

dapr-dotnet-starter

Simple learning & getting started example for .NET and Dapr
C#
2
star
58

doom-lite

A learning exercise in writing a simple retro style FPS
JavaScript
2
star
59

project-starter

A base template to be used for any project
Makefile
2
star
60

midi-toolkit

A HTML5 & JS based static web app for working with MIDI
JavaScript
2
star
61

caster

Retro style 90s FPS with a fantasy theme, written in Go
Go
2
star
62

nanoproxy

A simple HTTP reverse proxy & Kubernetes ingress controller written in Go as a learning exercise
Go
2
star
63

go-acs-client

Client SDK for the Azure Communication Services API
Go
2
star
64

serverless-fractal-bot

Fractals done in serverless and then tweeted to the world
JavaScript
2
star
65

http-toolkit

This is a simple backend service for testing and debugging HTTP requests
Go
1
star
66

tomb-viewer

Rendering Tomb Raider levels in TypeScript and WebGL
TypeScript
1
star
67

taskr

Demonstrator for Static Web Apps with Functions and Cosmos DB
JavaScript
1
star
68

cassandra-prototype

Experimenting with Cassandra
Shell
1
star
69

food-truck

Food Truck Challenge
Go
1
star
70

hivealive

IoT on Azure Proof Of Concept
JavaScript
1
star
71

gitops-test

Shell
1
star
72

mockery

API Server Mocking in Go
Go
1
star
73

azure-iot-demo

Azure IoT Demo using IoT Hubs, Service Bus and Functions
JavaScript
1
star
74

nanotracker

Retro styled music tracker in HTML5 & modern JavaScript
JavaScript
1
star
75

cse-onboarding

CSE Tech On-Boarding FY23
1
star
76

htmx-go-todo

An example of a simple HTMX app built using Go
Go
1
star
77

skytap-ansible

Skytap module for Ansible with some example playbooks
Python
1
star
78

dapr-gateway-hack

Experiment and hack for Dapr service invocation across networks and clusters
Go
1
star
79

gh-experiment

1
star
80

fractal-bot-go

Fractals & Twitter bot done with Azure Functions and Go custom handlers
Go
1
star
81

dotfiles-kit

Build your own dotfiles repo
Shell
1
star
82

nodejs-api-starter

Starter template app for a Node.js CRUD REST API using MongoDB & Mongoose
JavaScript
1
star
83

grpc-experiment

Go
1
star
84

benc.dev

blog & personal/vanity site
HTML
1
star
85

rust-wasm-fractals

Mandelbrot & Julia fractals rendered with Rust with WASM & JS
JavaScript
1
star
86

link-shortener

Link & URL shortener
Shell
1
star