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.
Last modified 1yr ago