# Quick Start — Runtime Environment Variables in 5 Minutes

> Get runtime environment variables in your frontend app in under 5 minutes. Install the SDK, rename your env vars, and run the gateway. No manifest required.

Source: https://rep-protocol.dev/quick-start/

The `.rep.yaml` manifest is entirely optional. The gateway works with just environment variables — the naming convention **is** the configuration.

1. **Rename your environment variables**

   Add the `REP_PUBLIC_`, `REP_SENSITIVE_`, or `REP_SERVER_` prefix to classify each variable:

   ```bash
   # Before (Vite)            → After (REP)
   VITE_API_URL               → REP_PUBLIC_API_URL
   VITE_FEATURE_FLAGS         → REP_PUBLIC_FEATURE_FLAGS

   # Before (CRA)             → After (REP)
   REACT_APP_API_URL          → REP_PUBLIC_API_URL

   # Should be encrypted in the browser
   REACT_APP_ANALYTICS_KEY    → REP_SENSITIVE_ANALYTICS_KEY

   # Should never reach the browser
   DB_PASSWORD                → REP_SERVER_DB_PASSWORD
   ```

2. **Install the SDK and update your code**

   ```bash
   npm install @rep-protocol/sdk
   ```

   Replace your `import.meta.env.*` / `process.env.*` reads:

   ```typescript
   import { rep } from '@rep-protocol/sdk';

   // Was: import.meta.env.VITE_API_URL
   const apiUrl = rep.get('API_URL');

   // With a default value for local development
   const apiUrl = rep.get('API_URL', 'http://localhost:3001');

   // Sensitive variable — encrypted, decrypted on demand
   const key = await rep.getSecure('ANALYTICS_KEY');
   ```

   `rep.get()` is **synchronous** — the SDK reads the payload from the DOM on import, before your first component renders. No loading state needed.

3. **Build your app (nothing changes)**

   ```bash
   npm run build
   ```

   The output is now environment-agnostic. The same `dist/` folder goes to every environment.

4. **Run the gateway**

     **Binary**

     ```bash
     REP_PUBLIC_API_URL=https://api.example.com \
     REP_PUBLIC_FEATURE_FLAGS=dark-mode,new-checkout \
     REP_SENSITIVE_ANALYTICS_KEY=ak_live_abc123 \
     ./rep-gateway --mode embedded --static-dir ./dist
     ```

     **Docker**

     ```bash
     docker run --rm -p 8080:8080 \
       -e REP_PUBLIC_API_URL=https://api.example.com \
       -e REP_PUBLIC_FEATURE_FLAGS=dark-mode,new-checkout \
       -e REP_SENSITIVE_ANALYTICS_KEY=ak_live_abc123 \
       -v "$(pwd)/dist:/static:ro" \
       ghcr.io/ruachtech/rep/gateway:latest \
       --mode embedded --static-dir /static
     ```

   Open `http://localhost:8080` — the gateway injected your variables into every HTML response.

## Changing config without rebuilding

Stop the gateway. Restart with different values. Same `dist/` folder, different runtime config:

```bash
REP_PUBLIC_API_URL=https://api.prod.example.com \
REP_PUBLIC_FEATURE_FLAGS=dark-mode \
REP_SENSITIVE_ANALYTICS_KEY=ak_live_prod_xyz \
./rep-gateway --mode embedded --static-dir ./dist
```

No rebuild. No new container image. This is the core proposition.

## Proxy mode

If you already have nginx, Caddy, or another static file server, run the gateway in front of it instead:

```bash
REP_PUBLIC_API_URL=https://api.example.com \
./rep-gateway --mode proxy --upstream localhost:80
```

The gateway intercepts `text/html` responses, injects the `<script>` tag, and passes everything else through unmodified.

## Dev mode — file watch hot reload

For local development, point the gateway at a `.env.local` file and let it watch for changes automatically — no signals, no restarts:

```bash
# .env.local
REP_PUBLIC_API_URL=http://localhost:3001
REP_PUBLIC_FEATURE_FLAGS=dark-mode
REP_SENSITIVE_ANALYTICS_KEY=ak_dev_abc123
```

```bash
./rep-gateway --mode embedded --static-dir ./dist \
  --hot-reload \
  --hot-reload-mode=file_watch \
  --env-file=.env.local \
  --watch-path=.env.local
```

Edit `.env.local` and save — the gateway picks up the changes immediately, re-encrypts sensitive vars with a fresh ephemeral key, and pushes a reload event over `/rep/changes` (SSE). Components using `rep.onChange()` re-render automatically without a browser refresh.

> **Tip**
>
> The CLI dev command handles this automatically: `npx @rep-protocol/cli dev --proxy http://localhost:5173` starts the gateway with file watch mode already enabled. See the [Local Development guide](/guides/development/).

## No build step? No framework?

REP works the same way with a single `index.html` and no bundler — see the [Simple HTML example](/examples/simple-html/) for the SDK loaded straight from a CDN.

## Build-tool plugins for local dev

Running `vite dev` or `next dev` without the gateway? Install the [Vite](/reference/plugins/vite/) or [Next.js](/reference/plugins/next/) plugin to get the same injected payload during development — no second terminal, no gateway binary needed locally.

## What's next?

- [Add a manifest file](/guides/manifest/) for startup validation and TypeScript type generation
- [Framework-specific guides](/frameworks/react/) for React, Vue, and Svelte adapters
- [Deploy with Docker](/deployment/docker-embedded/) for production containers
- [Variable classification](/concepts/variable-classification/) to understand the three-tier security model