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

# Deployment

> Deploy Digcrate to Vercel with a Convex backend

This guide covers deploying Digcrate to production on Vercel with a Convex backend. Complete the [prerequisites](/self-hosting/prerequisites) and prepare your [environment variables](/self-hosting/environment-variables) before starting.

<Steps>
  <Step title="Clone the repository and install dependencies">
    ```bash theme={null}
    git clone https://github.com/tmoody1973/crate-web.git
    cd crate-web
    npm install
    ```
  </Step>

  <Step title="Configure environment variables">
    Copy the example env file and fill in your values:

    ```bash theme={null}
    cp .env.local.example .env.local
    ```

    See [Environment variables](/self-hosting/environment-variables) for a full reference of every variable.
  </Step>

  <Step title="Initialize Convex">
    Convex requires two steps — one for local development and one for production.

    **Local development**

    Run the Convex dev server to create a development deployment and push your schema:

    ```bash theme={null}
    npx convex dev
    ```

    This writes `NEXT_PUBLIC_CONVEX_URL` and `CONVEX_DEPLOYMENT` to your `.env.local` automatically.

    **Production deployment**

    When you are ready to go to production, deploy Convex to a production environment:

    ```bash theme={null}
    npx convex deploy --yes
    ```

    Copy the production `NEXT_PUBLIC_CONVEX_URL` output — you will need it in the next step.

    <Tip>
      During local development you need both servers running at the same time. Open two terminal tabs:

      * **Terminal 1**: `npx convex dev`
      * **Terminal 2**: `npm run dev`

      The Convex dev server syncs your schema and functions to the cloud in real time. Next.js reads the `NEXT_PUBLIC_CONVEX_URL` from `.env.local` to connect.
    </Tip>
  </Step>

  <Step title="Deploy to Vercel">
    Install the Vercel CLI and deploy:

    ```bash theme={null}
    npm i -g vercel
    vercel --prod
    ```

    Follow the prompts to link the project to your Vercel account. Vercel will detect Next.js automatically and configure the build settings.
  </Step>

  <Step title="Set environment variables in Vercel">
    After deploying, add all environment variables in the Vercel dashboard:

    1. Open your project in the [Vercel dashboard](https://vercel.com/dashboard).
    2. Go to **Settings → Environment Variables**.
    3. Add each variable from your `.env.local`, using the production values (production Convex URL, live Stripe keys, production Auth0 callback URL, etc.).

    Key differences between local and production values:

    | Variable                             | Local value                                | Production value                            |
    | ------------------------------------ | ------------------------------------------ | ------------------------------------------- |
    | `NEXT_PUBLIC_CONVEX_URL`             | Dev deployment URL                         | Production deployment URL                   |
    | `STRIPE_SECRET_KEY`                  | `sk_test_...`                              | `sk_live_...`                               |
    | `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` | `pk_test_...`                              | `pk_live_...`                               |
    | `AUTH0_CALLBACK_URL`                 | `http://localhost:3000/api/auth0/callback` | `https://yourdomain.com/api/auth0/callback` |

    After saving, redeploy for the new variables to take effect:

    ```bash theme={null}
    vercel --prod
    ```
  </Step>

  <Step title="Configure Stripe webhooks">
    Digcrate uses a Stripe webhook to process subscription events (checkout completed, subscription updated, invoice paid, etc.).

    1. In the [Stripe dashboard](https://dashboard.stripe.com), go to **Developers → Webhooks**.
    2. Click **Add endpoint**.
    3. Set the endpoint URL to `https://yourdomain.com/api/webhooks/stripe`.
    4. Select the following events to listen for:
       * `checkout.session.completed`
       * `customer.subscription.updated`
       * `customer.subscription.deleted`
       * `invoice.payment_succeeded`
       * `invoice.payment_failed`
    5. Copy the **Signing secret** and set it as `STRIPE_WEBHOOK_SECRET` in Vercel.

    <Note>
      If you are not enabling subscription billing, you can skip this step. All users will be on the free tier.
    </Note>
  </Step>

  <Step title="Configure Auth0 Token Vault (connected services)">
    If you want to enable Spotify, Slack, and Google Docs integrations, configure Auth0:

    1. In the [Auth0 dashboard](https://manage.auth0.com), create a new application of type **Regular Web Application**.
    2. Under **Settings**, add your production callback URL to **Allowed Callback URLs**:
       ```
       https://yourdomain.com/api/auth0/callback
       ```
    3. Enable the **Token Vault** feature under **Connections** and configure the Spotify, Slack, and Google OAuth connections.
    4. Copy the **Domain**, **Client ID**, and **Client Secret** from the Auth0 application settings and set them as environment variables in Vercel.

    <Note>
      Auth0 Token Vault is optional. Skip this step if you do not need Spotify, Slack, or Google Docs integration.
    </Note>
  </Step>

  <Step title="Verify the deployment">
    Open your Vercel deployment URL and:

    1. Sign up for an account — Clerk should handle the flow and redirect you to the workspace.
    2. Run a test query (e.g. `/artist Radiohead`) — the agent should stream a response.
    3. If you configured Stripe, visit `/pricing` and verify the plans appear.
    4. Check the Convex dashboard to confirm data is being written to the database.
  </Step>
</Steps>