Skip to content

maclillis/rpi-system-monitor

Repository files navigation


Icon

Raspberry PI's Monitor App

An SPA real time dashboard for all of my Raspberry Pi's at home. Built with Vue and help from an API called EndRPI – fetching data such as CPU Temp, Memory, Freq. Clock and Uptime.

The UI

Designed in Figma.

Light mode

Dark mode

How I did it

I needed to monitor my Raspberry Pi web server somehow and thought it would be a fun project to design and develop my own dashboard. Starting by design the UI in Figma I later moved on to choosing Vue and Vue CLI as the perfect framework for this type of app.

It took me about a month from design to code and later my first published build. It took me another month to avoid the CORS-check that most modern Web browsers these days have but I got around it.

CORS

As I mentioned above, CORS is always going to happen when you fetch from different servers and URLs. What I finally did was to actually create my own Node Express-server (I had never worked with Node before) and ran every endpoint URL through the same server as the app was hosted on and managed to avoid CORS.

Built With

Usage

You are free to fork, share and devour this project as much as you want. I believe in sharing for the masses but since this a local app only, exposing open endopoints to a public URL is never a good idea, don't expect it to work outside your own Wifi. The EndRPi-package is easy to install and manage and there are plenty of guides on how to avoid CORS correctly.