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+.
1
# Install APT repository for node 15
2
wget -qO- https://deb.nodesource.com/setup_15.x | sudo -E bash -
3
4
# Install nodejs, npm
5
sudo apt install -y nodejs npm
Copied!

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.
1
# API connection URL and config (Speculare-server)
2
VUE_APP_API_HTTPS=YES/NO
3
VUE_APP_API_DOMAIN=subdomain.domain.com
4
5
# Websocket connection URL and config (Speculare-pgcdc)
6
VUE_APP_WS_SECURITY=YES/NO
7
VUE_APP_WS_DOMAIN=subdomain.domain.com
Copied!

Build the production project

You can now build the production files using:
1
# Install the node dependencies
2
npm install
3
4
# Build the production files
5
npm run build
Copied!
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.
Last modified 4mo ago
Copy link
Contents
Setup