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
VUE_APP_ALERTS_DOMAIN=subdomain.speculare.cloud
5
​
6
# Websocket connection URL and config (Speculare-pgcdc)
7
VUE_APP_WS_SECURITY=YES/NO
8
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.

Speculare PGCDC - Previous

How does it works

Next - Speculare Dashboard

Nginx config

Last modified 6mo ago

Copy link

Contents

Setup