Getting started

Speculare Dashboard it the UI and front-end of the whole infrastructure. It will gather data from Speculare Server and PGCDC for real-time update.

Setup

Speculare Dashboard if a Vue 3 app which means it's basically just a simple static website. The recommended way to host it is to use NGINX, this is the way we'll cover in this guide.

Install dependencies

We recommend you to use NodeJS 15+.

# Install APT repository for node 15
wget -qO- https://deb.nodesource.com/setup_15.x | sudo -E bash -

# Install nodejs, npm
sudo apt install -y nodejs npm

Setup an env file

The dashboard need an .env file before being build. The value in the .env file will be bundled with the app once the production build occur, so do not store any secret in it.

You can simply copy the .env.example into .env and edit the values.

# API connection URL and config (Speculare-server)
VUE_APP_API_HTTPS=YES/NO
VUE_APP_API_DOMAIN=subdomain.domain.com
VUE_APP_ALERTS_DOMAIN=subdomain.speculare.cloud

# Websocket connection URL and config (Speculare-pgcdc)
VUE_APP_WS_SECURITY=YES/NO
VUE_APP_WS_DOMAIN=subdomain.domain.com

Build the production project

You can now build the production files using:

# Install the node dependencies
npm install

# Build the production files
npm run build

This will produce a dist folder which holds all files needed for the production website. This folder can be placed anywhere.

For the sake of this demo we'll assume it's located in /root/speculare-dashboard/dist_current.