Skip to main content

Self-Hosting ValoSpectra (Frontend Only, Docker Optional)

This guide will explain how to set-up the Spectra Frontend only. This is useful if you're intending on using the official Ingest Servers provided by Spectra but want to make changes to colors or other Design elements.

Prerequisites​

Downloading the Frontend Source Code​

In order to host your own Frontend, you will need to download the source code from the GitHub Repository.

Open a Terminal and run the following command in the directory you want to clone the repository into:

git clone https://github.com/ValoSpectra/Spectra-Frontend.git

Configuring the Frontend​

In the directory you just cloned, you can make changes to the config.json file located under public/assets/config/config.json. This file is where you can configure the colors of the Spectra-Frontend:

info

If you're intending on using the official Ingest Server provided by Spectra, you can set the serverEndpoint to either https://eu.valospectra.com:5200 or https://na.valospectra.com:5200 depending on which region you're using.

If you want to make more changes to the Frontend, you can also open the project in a code editor and make changes to the source code to your liking.

Before you can run the Frontend, you'll need to create the environment file for the development environment.

Copy the contents of src/environments/environment.ts into the src/environments/environment.dev.ts file.

Contents:

export const environment = {
  production: false,
};

Running the Frontend Locally​

info

This is also helpful for seeing your changes immediately.

Before you can run the Frontend, you'll need to install the dependencies. Open a Terminal and run the following command in the directory you just cloned:

yarn install

Finally, run the following command to start the Spectra-Frontend on your local machine:

yarn start

The Spectra-Frontend will be running on http://localhost:4200.

Running the Frontend using Docker​

info

This is not recommended for production deployments.

The frontend can also be ran using a Docker container. This is useful if you want to use the Spectra Server next to your frontend while developing new features.

The repository already contains a docker-compose.yml file that can be used to run the Spectra-Frontend using Docker during development.

To run the Spectra-Frontend using Docker, open a Terminal and run the following command in the directory you just cloned:

docker-compose up

The Spectra-Frontend will be running on http://localhost:3000.

Adding the Spectra-Server for development​

If you want to use the Spectra Server next to your frontend while developing new features, you can add the Spectra-Server as a second service in the docker-compose.yml file. A sample can be found below:

---
services:
  valo-spectra-frontend:
    image: node:22-alpine
    entrypoint: sh -c 'corepack enable && yarn run start-docker'
    working_dir: /app
    volumes:
      - ./:/app
      - /var/www/.angular
    ports:
      - "3000:80"
  server:
    image: "ghcr.io/valospectra/server:latest"
    ports:
      - "5100:5100"
      - "5101:5101"
      - "5200:5200"
    environment:
      INSECURE: true
      REQUIRE_AUTH_KEY: false

Deploying to Github Pages​

If you're working with a fork of the github repository, you can use the free Github Pages to serve your customized Frontend.

You can follow the NPM Package angular-cli-ghpages from https://www.npmjs.com/package/angular-cli-ghpages

Deploying the Frontend to a Webserver (Optional)​

warning

This step requires more technical knowledge.

If you are working with a remote team and want to have the Frontend available for them, you can also deploy the Frontend to a webserver like Apache or Nginx.

An example configuration for Nginx is provided with the respository. It looks like this:

server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

You can build your configured version of the Spectra-Frontend using the yarn build command. This will produce a static build of the Spectra-Frontend that can be deployed to a webserver.

The static build can be found in the dist directory.