Mike MJ Harris

With a number of personal projects up and running in different places I wanted a dashboard where I could see the current status of my different sites as well as some info around what was deployed and when. In building my own dashboard I got to try out some new tech - some serverless technology on the infrastructure side and Vue Js framework and CSS grid on the front end.

Version.json

For each of my projects there's a script that adds build data to a version.json file in the public folder. Here's the script that builds that data for this blog and here's an example of what the version.json looks like:

Lovely Lambda

For the dashboard I needed to needed to work out how I'd collect that data. I wanted to learn a bit more about some of the serverless technology available. I opted to use an AWS lambda function to call off to all my projects and get the data. Javascript is my go to language and is supported by lambda. Initially I setup a local node project that returned the relevant info by making a series of calls to the various projects. Now how to run that in the cloud? AWS docs are very wide ranging and once you find the relevant part very helpful. For lambda I followed these docs which along with a helpful and informative UI I was able to import my code as a lambda function.

Serverless server

With the lambda function set up I wanted to be able to trigger it and access the data. The plan was to have an endpoint where I could call to get the data and expose it on the front of my project. This setup feels very much like what you use a server to do - but how to do the same using serverless? AWS provide an API Gateway which acts like a normal API - there's an endpoint you can call, this in turn triggers your lambda function and returns the data. All the functionality of an always listening server but only triggered on demand. Again I used a combo of AWS docs and the UI to get an API Gateway setup with the lambda function. Here's the resulting endpoint returning the status of my various projects.

Vue and CSS grid

To display the data on the front end I decided to use VueJs and use css grid for the layout. Both of which were new to me! The Vue docs were super helpful and for this fairly basic app I ended up with this js code and this html template. CSS Tricks is my usual go to for instructions on latest CSS properties - here's their instructions on how to use CSS grid.

In keeping with the rest of the project I decided to host the front end on amazon - creating a website enabled s3 bucket. For the project url to look like one of my projects I setup a proxy for the s3 bucket in the nginx server I use for my main website - here's the config for that.

Deployment

There are various abstractions for deploying serverless code - however I wanted to try out using standard AWS cli. For the lambda function this requires zipping up the folder with the code in it and using the cli to upload to the cloud. Similarly for the front end - I used webpack to package up the code and used the s3 cli to sync to the bucket.

Conclusion

Checkout the final dashboard here.

I got to try out some new tech, learnt a whole bunch of new things and got exactly what I wanted - a site with the status of my projects.

This post has been fairly minimal description of the steps I took. I found the docs for each of the projects pretty comprehensive and didn't feel I needed to add anything - I've linked to all the relevant sections but happy to help out if you are looking to do something similar and need any tips on how to piece together the pieces.

The combo of the API gateway and lambda to be an excellent replacement for a server. Speed of response isn't necessary for this project - I'll probably be the only one checking it and don't mind waiting a few milliseconds for startup. I appreciate that keeping lambda's warm is a challenge but not one I needed to address here - something to dig into in the future!