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.
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
npminstall
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.