> ## Documentation Index
> Fetch the complete documentation index at: https://docs.opensync.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Netlify Frontend

> Deploy the frontend to Netlify

# Netlify Frontend

Deploy the OpenSync frontend to Netlify or Vercel.

## Netlify Deploy

### One-Click

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/waynesutton/opensync)

### Manual Deploy

<Steps>
  <Step title="Connect Repository">
    In Netlify, click **New site from Git** and connect your GitHub repository.
  </Step>

  <Step title="Configure Build">
    Set build settings: - **Build command:** `npm run build` - **Publish
    directory:** `dist`
  </Step>

  <Step title="Set Environment Variables">
    Add required environment variables (see below).
  </Step>

  <Step title="Deploy">Click **Deploy site**.</Step>
</Steps>

## Vercel Deploy

### One-Click

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/waynesutton/opensync)

### Manual Deploy

<Steps>
  <Step title="Import Project">
    In Vercel, click **New Project** and import your repository.
  </Step>

  <Step title="Configure">
    Framework preset will be detected automatically (Vite).
  </Step>

  <Step title="Environment Variables">Add required environment variables.</Step>
  <Step title="Deploy">Click **Deploy**.</Step>
</Steps>

## Environment Variables

Set these in your hosting platform:

```bash theme={null}
# Convex (required)
VITE_CONVEX_URL=https://your-deployment.convex.cloud

# WorkOS (required for auth)
WORKOS_API_KEY=sk_...
WORKOS_CLIENT_ID=client_...
WORKOS_COOKIE_PASSWORD=your-32-char-password
```

<Warning>
  Remember to add your production URL to WorkOS CORS settings.
</Warning>

## Build Settings

| Setting          | Value           |
| ---------------- | --------------- |
| Build command    | `npm run build` |
| Output directory | `dist`          |
| Node version     | 18+             |

## Custom Domain

Both Netlify and Vercel support custom domains:

1. Add your domain in the hosting dashboard
2. Update DNS records as instructed
3. Enable HTTPS (automatic)
4. Update WorkOS redirect URIs

## Preview Deployments

Both platforms support preview deployments for pull requests. Ensure preview URLs are added to WorkOS if you need auth to work in previews.