Skip to content
TCG Set Designer

Installation via Docker

Guides lead a user through a specific task they want to accomplish, often with a sequence of steps. Writing a good guide requires thinking about what your users are trying to do.

Docker Compose File

Here is an example Docker Compose file:

name: TCG Set Designer
services:
  backend:
    image: ghcr.io/bigfootds/tcg-set-designer-api:latest
    container_name: tcgsd-api
    ports:
      - 55000:55000
    restart: unless-stopped
  frontend:
    image: ghcr.io/bigfootds/tcg-set-designer-web:latest
    container_name: tcgsd-web
    ports:
      - 5000:80
    environment:
      - APP_ENV_PREFIX=VITE_
      - VITE_BACKEND_NETWORK_HOSTNAME=localhost
      - VITE_BACKEND_NETWORK_PORT=55000
    restart: unless-stopped

The website interface is accessible through your browser. If you’re running this Docker application on the same machine that you’re intending to access and use it from, then you can visit http://localhost:5000 if you’re using the above file.

If you’re intending to run this Docker application in a shared network (e.g. an office, studio, or other multi-computer environment), then you may want to change the value of VITE_BACKEND_NETWORK_HOSTNAME from localhost to the local IP address of the computer running the containers.

There’s some other configuration that can be done in each container as well, through the environment variables of each container.

Environment Variables for tcg-set-designer-api

You can leave out all of these, as the back-end API container will set up its own environment variables if any are needed.

If you would like to customise the environment variables of the tcg-set-designer-api container, their purposes and accepted values are explained below. The code snippet below is from the server’s own JavaScript, from the part that sets the default values for the environment variables.

{
  // The port that the server listens to,
  // internally within the Docker container.
  // Doesn't need changing.
  PORT: 55000,


  // Enables a developer-focused API documentation webpage.
  // Doesn't impact typical project usage.
  SWAGGER_DEV: true,


  // Unique string value to help encrypt user passwords.
  // Can be customised, but the default value
  // is more unique than anything that most people can think of.
  // Whatever value is used here should be kept secret!
  JWT_SECRET_KEY: crypto.randomBytes(64).toString("hex"),


  // Determines if the underlying database system (TypeORM) should log.
  // This can heavily pollute the log window,
  // so it's best left as "false" unless you're troubleshooting something specific.
  // Should be either "true" or "false".
  DATABASE_LOGGING: false,


  // The container sets up its own environment variables if they don't already exist.
  // Set this to "true" to make it constantly
  // overwrite your custom values with the defaults.
  // So... don't typically change this.
  ENV_SETUP_OVERWRITE: false,


  // The path to the TypeORM database file.
  // Should be impacted by the Docker volumes mounted for this container.
  DATABASE_PATH: "./database/"
}

Environment Variables for tcg-set-designer-web

The front-end web client’s environment variables are mostly just focused on pointing the web client to the correct back-end API.

{
  APP_ENV_PREFIX: "VITE_",
  VITE_BACKEND_NETWORK_HOSTNAME:"localhost",
  VITE_BACKEND_NETWORK_PORT:55000
}