1. Project Overview & Quickstart (rivet-dev/frontend) Copy Chapter

File: README.md Copy Chapter

Rivet Hub

[!WARNING]
Repository has been moved to rivet-gg/rivet.

This is the source code for the Rivet Hub frontend

Also check out the Rivet backend for issues, documentation, and more.

Requirements Copy Chapter

• NodeJS v16+
• Yarn
• Git LFS (make sure this is installed before cloning repo)

Getting started Copy Chapter

Run the following command:

yarn start

This will open http://localhost:5080 in your browser. By default, this will connect to Rivet's staging servers (https://staging2.gameinc.io).

Environment variables configuration Copy Chapter

1. Copy apps/hub/.env.example to apps/hub/.env.development.local and change variables if needed.

Developing with self-hosted backend Copy Chapter

Where do I self-host the backend?

See our backend repo here.

API Endpoint Configuration Copy Section

To configure the hub to connect to your own server (for example, mydomain.com), update the .env file in apps/hub folder to include the following:

VITE_APP_API_URL=https://api.mydomain.com

Backend configuration Copy Section

If self-hosting your own backend, the default configuration assumes the hub will be hosted at https://hub.{your domain}. You may want to change the following namespace config parameters:

dns.hub_origin (default: https://hub.{main domain})

This configures the origin that the API will build URLs for.

For example, identity.getProfile returns a URL to the hub profile in identity.external.profile.

rivet.api.hub_origin_regex (default: ^https://hub\\.{main domain}$)

This configurs the CORS origin regex. This allows you to secure where requests can come from to your hub.

If you are running your own cluster for development, consider updating the CORS rules to include localhost similar to below.

CORS Copy Chapter

staging2.gameinc.io CORS is specially configured to have the following origin regex:

^https?://(hub\\.rivet\\.gg|[^\\.]+\\.rivet-hub\\.pages\\.dev|localhost:\\d+|192\\.168\\.\\d+\\.\\d+:\\d+|0\\.0\\.0\\.0\\.:\\d+)$

This lets you develop with the hub using localhost.

Filing issues Copy Chapter

All Hub issues are managed in the main Rivet repository.

📚 Documentation Copy Chapter

Technologies Copy Section

• React
• TanStack Router
• TanStack Query
• Tailwind CSS
• Storybook
• TypeScript
• Yarn
• Biome
• shadcn/ui
• React Hook Form
• Zod
• Turbo

File structure Copy Section

• apps/ - Contains the main applications.

  • hub/ - The Rivet Hub application.

    • src/ - Contains the source code.
      • components/ - Contains the components used in the application.
      • contexts/ - Contains the React contexts
      • forms/ - Contains the forms.
      • layouts/ - Contains the layouts, used in routing.
      • queries/ - Contains the TanStack queries and mutations configs.
      • routes/ - Contains the routes.
      • views/ - Contains the views.

  • docs/ - The Storybook application.

• packages/ - Contains the shared components

  • components/ - Contains the shared components.
  • icons/ - Contains icons used by Rivet project, read more here.

Routing Copy Section

The routing is done using the TanStack Router. The routes are defined in the apps/hub/src/routes folder. For more information, check the TanStack Router documentation. The project is using TanStack's Router Vite integration for dynamically generating route types. This means that all parameters and query parameters are typed and validated.

Routes

To define a route, create a new file in the apps/hub/src/routes folder. The route file should export a Route constant. See already existing routes for examples.

Layouts

To define a reusable layout, you can create a layout component in the apps/hub/src/layouts folder and use it in the route definition. See already existing layouts for examples.

Data fetching Copy Section

The data fetching is done using the TanStack Query. The queries are defined in the apps/hub/src/queries folder. For more information, check the TanStack Query documentation.

Query and mutation configs

All query and mutation configs are grouped by the business logic they are related to. For example, all queries related to the games are in the games.ts file. Configs define the query key, the query function, and other query options, like the query cache time or the query selector. All queries are cached by default in the local storage. To adjust the cache time, consult the TanStack Query documentation.

Forms Copy Section

The forms are created using the React Hook Form library. The form schemas are defined using the Zod library. The forms are defined in the apps/hub/src/forms folder. For more information, check the React Hook Form documentation and the Zod documentation. For convenience, the form factory is used to create the forms. The form factory is defined in the apps/hub/lib/create-schema-form.tsx file.

Reusable components (across the Rivet products) Copy Section

The reusable components are defined in the packages/components/src folder. The components are grouped by the business logic they are related to. For example, all components related to the games are in the games folder. The components are using the shadcn/ui library for styling. The atom components (like buttons, inputs, etc.) are defined in the packages/components/src/ui. Atom components represent the smallest components that can be used in the application, like buttons and inputs. Please keep the components as small and reusable as possible.

Hub components Copy Section

The components used in the Rivet Hub are defined in the apps/hub/src/components folder. The components are grouped by the business logic they are related to. For example, all components related to the games are in the games folder. The components are using the same technology stack as the reusable components. The components here are more specific to the Rivet Hub and are not meant to be reused across the Rivet products.

Views

Views are special components that are used in the routes, following MVC pattern. They are defined in the apps/hub/src/views folder. The views are using the components and the queries to display the data. The views are not meant to be reused across the Rivet products.

Configuration Copy Section

The project is designed to be built once and used in multiple environments. UI package uses a React context to determine environment configuration. Hub app, on the other hand, uses an HTML element to fetch the configuration and pass it to the UI elements. To configure the project put the following element in the public/index.html file:

<script type="application/json" id="RIVET_CONFIG">
  { "apiUrl": "YOUR API URL", "assetsUrl": "YOUR ASSETS URL" }
</script>

and fill it with the appropriate values.

However, if you want to just deploy the project normally, supply the environment variables:

VITE_APP_API_URL=YOUR
VITE_APP_ASSETS_URL=VALUES

when building the project.

Troubleshooting Copy Section

`Failed to resolve import "./some_file.js" from "../../packages/components/dist/index.js". Does the file exist?` error

This is caused by the race condition between the Vite server (responsible for building Hub) and the Rollup build (responsible for building UI). To fix this, stop the Vite server remove node_modules from the hub directory, and run the Vite server again.

`[postcss] Cannot find module '/your/path/to/project/node_modules/@rivet-gg/components/dist/index.cjs'` error Copy Section

See the solution for the previous error.

Unknown issue with icons, most of the icons are squares or not showing Copy Section

See troubleshooting section for @rivet-gg/icons package.

🏗️ Contributing Copy Chapter

1. Look for any issue that describes something that needs to be done - or, if
   you're willing to add a new feature, create a new issue with an appropriate
   description.
2. Submit your pull request.
3. Rivet team will review your changes.
4. Don't forget to join Rivet's Discord to hang out
   with the devs, or to pairprogram together!

File: packages/icons/README.md Copy Chapter

Rivet Icons

Motivation Copy Chapter

Rivet Icons are a set of SVG icons that are used in Rivet products. This package is built on top of great Font Awesome icons. Some icons used in our products are from the premium Font Awesome icon set. We've created a package that lets you use premium icons without having to buy a Font Awesome license. This is achieved by swapping premium icons with a simple rectangle.

Contributing Copy Chapter

Prerequisites Copy Section

Obtain a Font Awesome Pro license and set the FONTAWESOME_PACKAGE_TOKEN environment variable to your Font Awesome Pro token. This is required to download the premium icons.

Adding new icons Copy Section

1. Modify generateManifest.js to include new icons.
2. Run ./scripts/generateManifest.js to generate a new manifest.json file.
   • If you're getting an error: Could not find package @fortawesome/pro-solid-svg-icons,
3. Commit the changes to the manifest.json file.
4. Run yarn rebuild @rivet-gg/icons to generate a new icon set with the new icons.

Troubleshooting Copy Chapter

Icons not showing, or icons are rectangles Copy Section

Some icons used in the open-source Rivet products are part of the premium Font Awesome icon set. We can't share those icons publicly, without violating FA's Terms Of Service. By default, after adding this package to any project, a post install script generates an icon set with all premium icons replaced with simple rectangles. So, you can reference premium icons, but you won't see them. To be able to see premium icons, make sure an environment variable FONTAWESOME_PACKAGE_TOKEN is set when running yarn install. You can re-generate our icon set by running yarn rebuild @rivet-gg/icons if your dependencies are already installed.

Can't start/build project Copy Section

The description of these kinds of errors may vary. This package heavily depends on postinstall scripts from Yarn/npm. Make sure you didn't disable them accidentally. Turn on post-installation script support and run yarn install or yarn rebuild @rivet-gg/cions again. If there is still a problem, please contact us on Discord.

`Could not find package @fortawesome/pro-solid-svg-icons` when generating manifest Copy Section

Make sure you have installed pro icons. If you're getting an error, you can try to install them manually by running yarn add @fortawesome/pro-solid-svg-icons, or run yarn install in src folder. Finally run ./scripts/generateManifest.js again.

2. Official Technical Reference & Guides (rivet-dev/website) Copy Chapter

File: README.md Copy Chapter

Rivet Website

The source for rivet.dev — marketing pages, docs, and blog.

Each product's documentation is authored in that product's own repository and
vendored in here. See CLAUDE.md for the layout and
HIDDEN.md for what is deliberately unpublished.

Develop Copy Chapter

pnpm install
pnpm assemble   # link each product's docs bundle
pnpm dev

License Copy Chapter

Apache 2.0

File: cloud/docs/content/docs/compute.mdx Copy Chapter

title: "Rivet Compute" Copy Chapter

Rivet Compute runs your backend for you. You supply a container image; Rivet builds it, pushes it to its own registry, provisions a managed pool, and gives you a URL.

Requirements Copy Chapter

• A Rivet Cloud account and project
• Docker running locally
• Your app. If you do not have one yet, start from the Quickstart.

Steps Copy Chapter

FROM node:24-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
CMD ["node", "src/server.js"]

npx @rivetkit/cli deploy --token cloud_api_xxxxx

curl -s "$CLOUD_API_URL/projects/$PROJECT/namespaces/$CLOUD_NAMESPACE/managed-pools/default?org=$ORG" -H "Authorization: Bearer $CLOUD_TOKEN"

npx @rivetkit/cli setup-ci

gh secret set RIVET_CLOUD_TOKEN

Logs Copy Chapter

rivet logs prints the last 100 lines from the default pool in the production namespace, oldest first, then exits.

npx @rivetkit/cli logs

Token resolution matches deploy: the --token flag, then RIVET_CLOUD_TOKEN, then ~/.rivet/credentials.

Add --follow (-f) to stream instead of fetching history:

npx @rivetkit/cli logs --follow

Each line is <timestamp> [<SEVERITY>] <region> <message>:

2026-06-16T18:26:51.160Z [INFO] eu-central-1 server listening on port 3000
2026-06-17T11:24:20.425Z [ERROR] us-east-1 failed to connect to upstream

More examples:

# Last 200 lines from a specific namespace
npx @rivetkit/cli logs --namespace production -n 200

# A specific compute pool
npx @rivetkit/cli logs --pool my-pool

# Live tail, filtered
npx @rivetkit/cli logs --follow --contains error

# JSON, piped to jq
npx @rivetkit/cli logs -n 50 --json | jq .

Troubleshooting Copy Chapter

Pricing Copy Chapter

You are billed for the compute your deployment uses while it is running.

npx @rivetkit/cli setup-ci
gh secret set RIVET_CLOUD_TOKEN

name: Rivet Preview

on:
  pull_request:
    types: [opened, synchronize, reopened]
  push:
    branches: [main]

concurrency:
  group: rivet-preview-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

jobs:
  rivet-preview:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    steps:
      - uses: rivet-dev/preview-namespace-action@v1
        with:
          platform: vercel
          rivet-token: ${{ secrets.RIVET_CLOUD_TOKEN }}
          vercel-token: ${{ secrets.VERCEL_TOKEN }}

pnpm add @rivet-gg/icons

import { Icon, faCheckCircle } from "@rivet-gg/icons";

aws secretsmanager create-secret \
  --name rivet/admin-token \
  --secret-string "$(openssl rand -hex 32)"

{
  "family": "rivet-engine",
  "requiresCompatibilities": ["FARGATE"],
  "networkMode": "awsvpc",
  "cpu": "1024",
  "memory": "2048",
  "containerDefinitions": [
    {
      "name": "rivet-engine",
      "image": "rivetdev/engine:2.3.3",
      "portMappings": [
        { "containerPort": 6420 },
        { "containerPort": 6421 }
      ],
      "environment": [
        { "name": "RIVET__FILE_SYSTEM__PATH", "value": "/data" }
      ],
      "secrets": [
        {
          "name": "RIVET__AUTH__ADMIN_TOKEN",
          "valueFrom": "arn:aws:secretsmanager:REGION:ACCOUNT:secret:rivet/admin-token"
        }
      ],
      "mountPoints": [
        { "sourceVolume": "rivet-data", "containerPath": "/data" }
      ]
    }
  ],
  "volumes": [
    {
      "name": "rivet-data",
      "efsVolumeConfiguration": { "fileSystemId": "fs-XXXXXXXX" }
    }
  ]
}

aws elbv2 modify-load-balancer-attributes \
  --load-balancer-arn <arn> \
  --attributes Key=idle_timeout.timeout_seconds,Value=3600

aws ecs describe-services --cluster <cluster> --services rivet-engine \
  --query 'services[0].deployments[0].rolloutState'

curl -X PUT "http://<load-balancer-host>/runner-configs/default?namespace=default" \
  -H "Authorization: Bearer $RIVET_ADMIN_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"datacenters":{"default":{"normal":{}}}}'

pg_dump "postgresql://user:password@host:5432/rivet" --format=custom --file=rivet-$(date +%F).dump

pg_restore --dbname="postgresql://user:password@host:5432/rivet" --clean --if-exists rivet-2026-01-01.dump

# Stop the control plane first
tar czf rivet-data-$(date +%F).tar.gz -C /var/lib/rivet data

RIVET__POSTGRES__URL="postgresql://user:password@host:5432/database"

# Load from a specific file
rivet-engine --config /path/to/config.json

# Load from a directory
rivet-engine --config /etc/rivet

# Load multiple paths, merged in order
rivet-engine --config /etc/rivet/base.json --config /etc/rivet/override.json

{
	"pegboard": {
		"envoy_load_balancer": {
			"hash": {
				"virtual_nodes": 8,
				"samples": 2,
				"max_scan": 16,
				"use_snapshot_read": true
			}
		}
	}
}

openssl rand -hex 32

docker run -d \
  --restart unless-stopped \
  -p 6420:6420 \
  -p 6421:6421 \
  -v rivet-data:/data \
  -e RIVET__FILE_SYSTEM__PATH="/data" \
  -e RIVET__AUTH__ADMIN_TOKEN="<your-token>" \
  rivetdev/engine:2.3.3

curl -i http://<host>:6421/health

curl -X PUT "http://<host>:6420/runner-configs/default?namespace=default" \
  -H "Authorization: Bearer $RIVET_ADMIN_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"datacenters":{"default":{"normal":{}}}}'

RIVET_ENDPOINT="https://default:<admin-token>@your-control-plane.example.com"

services:
  rivet-engine:
    image: rivetdev/engine:latest
    ports:
      - "6420:6420"
    volumes:
      - rivet-data:/data
    environment:
      RIVET__FILE_SYSTEM__PATH: "/data"
      RIVET__AUTH__ADMIN_TOKEN: "${RIVET_ADMIN_TOKEN}"
    restart: unless-stopped

volumes:
  rivet-data:

echo "RIVET_ADMIN_TOKEN=$(openssl rand -hex 32)" >> .env

docker compose up -d

curl -i http://localhost:6420/health

curl -X PUT "http://localhost:6420/runner-configs/default?namespace=default" \
  -H "Authorization: Bearer $RIVET_ADMIN_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"datacenters":{"default":{"normal":{}}}}'

my-app:
    build: .
    environment:
      RIVET_ENDPOINT: "http://default:${RIVET_ADMIN_TOKEN}@rivet-engine:6420"
    depends_on:
      - rivet-engine
    restart: unless-stopped

docker compose up -d

services:
  postgres:
    image: postgres:15
    environment:
      POSTGRES_DB: rivet
      POSTGRES_USER: rivet
      POSTGRES_PASSWORD: rivet_password
    volumes:
      - postgres-data:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U rivet -d rivet"]
      interval: 5s
      timeout: 5s
      retries: 12
    restart: unless-stopped

  rivet-engine:
    image: rivetdev/engine:latest
    ports:
      - "6420:6420"
    environment:
      RIVET__POSTGRES__URL: postgresql://rivet:rivet_password@postgres:5432/rivet
      RIVET__AUTH__ADMIN_TOKEN: "${RIVET_ADMIN_TOKEN}"
    depends_on:
      postgres:
        condition: service_healthy
    restart: unless-stopped

volumes:
  postgres-data:

volumes:
      - ./rivet-config.json:/etc/rivet/config.json:ro
      - rivet-data:/data