Skip to main content
Environment variables configure the connection between the frontend application and backend services. All variables should be defined in a .env file at the root of the project.

​
Quick Start

Copy the example environment file: 
cp .env-example .env
Then edit .env with your configuration values.

​
Required Variables

​
Hasura Authentication

​
HASURA_GRAPHQL_ADMIN_SECRET
string
required
Admin secret for authenticating with the Hasura GraphQL engine.This secret is used by the code generation script to introspect the GraphQL schema and generate type-safe client code.
HASURA_GRAPHQL_ADMIN_SECRET=your-secure-admin-secret
Keep this secret secure. Never commit it to version control or expose it in client-side code.

​
Public Runtime Configuration

These variables are prefixed with NUXT_PUBLIC_ and are available in both server and client contexts. They configure the domains for various 5Stack services.
​
NUXT_PUBLIC_WEB_DOMAIN
string
required
The main web application domain.
NUXT_PUBLIC_WEB_DOMAIN=5stack.gg
Used for:
  • Public-facing web interface
  • OAuth callbacks
  • SEO and meta tags
​
NUXT_PUBLIC_API_DOMAIN
string
required
The Hasura GraphQL API domain.
NUXT_PUBLIC_API_DOMAIN=api.5stack.gg
The GraphQL endpoint will be available at:
https://{NUXT_PUBLIC_API_DOMAIN}/v1/graphql
​
NUXT_PUBLIC_WS_DOMAIN
string
required
WebSocket server domain for real-time features.
NUXT_PUBLIC_WS_DOMAIN=ws.5stack.gg
Used for:
  • GraphQL subscriptions
  • Real-time match updates
  • Live server status
​
NUXT_PUBLIC_RELAY_DOMAIN
string
required
WebRTC relay server domain for peer-to-peer connections.
NUXT_PUBLIC_RELAY_DOMAIN=relay.5stack.gg
Used for:
  • WebRTC signaling
  • Peer connection establishment
  • Voice/video features
​
NUXT_PUBLIC_DEMOS_DOMAIN
string
required
Demo file storage and retrieval domain.
NUXT_PUBLIC_DEMOS_DOMAIN=demos.5stack.gg
Used for:
  • CS2 demo file downloads
  • Demo playback
  • Match recordings
​
NUXT_PUBLIC_TYPESENSE_HOST
string
required
Typesense search server host.
NUXT_PUBLIC_TYPESENSE_HOST=search.5stack.gg
Used for:
  • Full-text search
  • Player/team search
  • Match history search

​
Search Configuration

​
TYPESENSE_API_KEY
string
required
API key for authenticating with the Typesense search server.
TYPESENSE_API_KEY=your-typesense-api-key
This should be a search-only API key with read permissions. Never use the admin API key in the frontend.

​
Nuxt Runtime Config

These environment variables are automatically mapped to Nuxt’s runtime config. You can access them in your application code: 
const config = useRuntimeConfig()

// Access public config
const apiDomain = config.public.apiDomain
const wsDomain = config.public.wsDomain
const webDomain = config.public.webDomain
const demosDomain = config.public.demosDomain
const relayDomain = config.public.relayDomain
The mapping is defined in nuxt.config.ts:125-132: 
runtimeConfig: {
  public: {
    apiDomain: "",
    wsDomain: "",
    webDomain: "",
    demosDomain: "",
    relayDomain: "",
  },
}

​
Environment-Specific Configuration

​
Development

For local development, you can use localhost or local network addresses: 
NUXT_PUBLIC_WEB_DOMAIN=localhost:3000
NUXT_PUBLIC_API_DOMAIN=localhost:8080
NUXT_PUBLIC_WS_DOMAIN=localhost:8080
NUXT_PUBLIC_RELAY_DOMAIN=localhost:3001
NUXT_PUBLIC_DEMOS_DOMAIN=localhost:9000
NUXT_PUBLIC_TYPESENSE_HOST=localhost:8108

​
Staging

For staging environments, use staging subdomains: 
NUXT_PUBLIC_WEB_DOMAIN=staging.5stack.gg
NUXT_PUBLIC_API_DOMAIN=api-staging.5stack.gg
NUXT_PUBLIC_WS_DOMAIN=ws-staging.5stack.gg
NUXT_PUBLIC_RELAY_DOMAIN=relay-staging.5stack.gg
NUXT_PUBLIC_DEMOS_DOMAIN=demos-staging.5stack.gg
NUXT_PUBLIC_TYPESENSE_HOST=search-staging.5stack.gg

​
Production

For production, use the main domain and production subdomains: 
NUXT_PUBLIC_WEB_DOMAIN=5stack.gg
NUXT_PUBLIC_API_DOMAIN=api.5stack.gg
NUXT_PUBLIC_WS_DOMAIN=ws.5stack.gg
NUXT_PUBLIC_RELAY_DOMAIN=relay.5stack.gg
NUXT_PUBLIC_DEMOS_DOMAIN=demos.5stack.gg
NUXT_PUBLIC_TYPESENSE_HOST=search.5stack.gg

​
Docker Configuration

When using Docker, environment variables can be passed via:

​
Docker Run

docker run \
  -e NUXT_PUBLIC_WEB_DOMAIN=5stack.gg \
  -e NUXT_PUBLIC_API_DOMAIN=api.5stack.gg \
  -e NUXT_PUBLIC_WS_DOMAIN=ws.5stack.gg \
  -e NUXT_PUBLIC_RELAY_DOMAIN=relay.5stack.gg \
  -e NUXT_PUBLIC_DEMOS_DOMAIN=demos.5stack.gg \
  -e NUXT_PUBLIC_TYPESENSE_HOST=search.5stack.gg \
  -p 3000:3000 \
  5stack:latest

​
Docker Compose

services:
  web:
    image: 5stack:latest
    environment:
      - NUXT_PUBLIC_WEB_DOMAIN=5stack.gg
      - NUXT_PUBLIC_API_DOMAIN=api.5stack.gg
      - NUXT_PUBLIC_WS_DOMAIN=ws.5stack.gg
      - NUXT_PUBLIC_RELAY_DOMAIN=relay.5stack.gg
      - NUXT_PUBLIC_DEMOS_DOMAIN=demos.5stack.gg
      - NUXT_PUBLIC_TYPESENSE_HOST=search.5stack.gg
    ports:
      - "3000:3000"

​
Environment File

services:
  web:
    image: 5stack:latest
    env_file:
      - .env
    ports:
      - "3000:3000"

​
Security Best Practices

Follow these security guidelines to protect sensitive data:
  1. Never commit .env files to version control Ensure .env is in your .gitignore: 
    .env
.env.*
!.env-example
  2. Use different secrets for each environment Don’t reuse the same HASURA_GRAPHQL_ADMIN_SECRET across environments.
  3. Rotate secrets regularly Update API keys and secrets periodically, especially after team member changes.
  4. Use environment-specific API keys Use read-only or limited-scope keys for the frontend when possible.
  5. Validate domain configuration Ensure domain variables match your actual infrastructure to prevent CORS issues.

​
Troubleshooting

Verify that:
  • NUXT_PUBLIC_API_DOMAIN points to your Hasura instance
  • The endpoint https://{NUXT_PUBLIC_API_DOMAIN}/v1/graphql is accessible
  • CORS is configured correctly on Hasura
  • HASURA_GRAPHQL_ADMIN_SECRET is correct (for codegen)
Check that:
  • NUXT_PUBLIC_WS_DOMAIN uses the correct protocol (ws:// or wss://)
  • WebSocket connections are not blocked by firewalls
  • The WebSocket server is running and accessible
Try:
  • Restart the development server after changing .env
  • Verify the .env file is in the project root
  • Check for syntax errors in the .env file
  • Ensure variable names are exactly as specified (case-sensitive)
The yarn codegen command requires:
  • Valid NUXT_PUBLIC_API_DOMAIN
  • Correct HASURA_GRAPHQL_ADMIN_SECRET
  • Network access to the Hasura instance
  • The .env file must be sourced (command uses . ./.env)

​
Next Steps

Local Setup

Set up your development environment

Docker Deployment

Deploy using Docker

GraphQL API

Explore the GraphQL API schema

Tech Stack

Learn about the technology stack

Build docs developers (and LLMs) love

Get started for freeTalk to us