> ## 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

# Previous frontend hosting

<Warning>This is an archived guide for the previous setup. Use [Convex static hosting](/hosting/static-hosting) for the current release.</Warning>

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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.