bencuk/vuego-demoapp repository overview

⁠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 SPA component was created using the Vue CLI and uses Bootstrap-Vue⁠ and Font Awesome⁠. In addition Gauge.js⁠ is used for the dials in the monitoring view
• The Go component is a vanilla Go HTTP server using gopsutils⁠ for monitoring metrics, and Gorilla Mux⁠ for routing

⁠Repo Structure

/
├── spa            Root of the Vue.js project
│   └── src        Vue.js source code
├── azure          Supporting files for Azure deployment etc
└── server         Go backend server
    └── vendor     Vendor libraries used by the server 

⁠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 two routes:
  • GET /api/info - Returns system information and various properties as JSON
  • GET /api/metrics - Returns monitoring metrics for CPU, memory, disk and network. This data comes from the gopsutils library
  • GET /api/weather - Returns weather data for the location determined automatically from the calling IP address, uses IPStack and DarkSky REST APIs

⁠Building & Running Locally

⁠1. Pre-reqs

• Install Node.js⁠
• Install Vue CLI⁠
• You will need Go v1.12+ installed and configured⁠.
• Once Go v1.12+ is installed, also make sure you have the GOPATH environmental variable set up
• Clone the project to any directory where you do development work

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

⁠2. Building the Vue.js SPA

To build and bundle the SPA run the following. This will output the resulting app (HTML, CSS, JS, assets, etc) to spa/dist

cd spa
npm install
npm run build

⁠3. Building the Go server

To build the Go server component run the following. This will create an executable called server or server.exe

cd server
go build

⁠4. Running the combined app

To start the app, launch the server exe and pass the directory containing the content you wish to serve as a command line parameter. The server will listen on port 4000 by default, change this by setting the environmental variable PORT

cd server
./server ../spa/dist

Then access http://localhost:4000/⁠

⁠Notes on running locally

• You can run the Vue.js app standalone with by running npm run serve, this will start a dev server on port 8080. This will serve the app content and will auto reload when code changes. However the API endpoint will not be available so the 'Sys Info' & 'Monitor' pages will not receive any data
• During development you can run the Go server directly without building the exe, by running go run *.go or go run *.go ../spa/dist

⁠Containers

Public Docker image is available on Dockerhub⁠

Run with docker run -d -p 4000:4000 bencuk/vuego-demoapp

⁠Config Environmental Variables

• WEATHER_API_KEY - Enable the weather feature with a DarkSky API key
• IPSTACK_API_KEY - Enable the weather feature with a IPStack API key

⁠Application Insights

Waiting for golang support

⁠Azure Templates

Templates for deployment to Azure with "quick deploy" buttons are here⁠

⁠Updates