Skip to content
On this page


Let's deploy the todo app to vercel.

LiveQuery Serverless Support

Vercel is a serverless platform, as such we can't use it to maintain an active subscription channel for our live query, and we'll need to use a 3rd party provider for that.

In this demo, we'll use Follow these steps only if you want to use liveQuery in the app

  1. sh
    npm i ably
  2. Goto create a user and click on the "Create new app" button

  3. Select a name and click create app

  4. Click on the API Keys button on top.

  5. Copy the first api key (with the many capabilities), create an entry in the .env.local file, name it ABLY_API_KEY and paste the api key there.

  6. Configure ably as the subscriptionServer

    // src/api/[...remult].ts
    import ably from "ably/promises"
    import { AblySubscriptionServer } from "remult/ably"
    export default remultNext({
      subscriptionServer: new AblySubscriptionServer(
        new ably.Rest(process.env["ABLY_API_KEY"]!)
  7. Next, we'll need to create a route that ably's client on the front-end will use to get a token for a user that wants to subscribe to a channel - in the src/pages/api folder, create a file called getAblyToken.ts

    // src/pages/api/getAblyToken.ts
    import { NextApiRequest, NextApiResponse } from "next"
    import ably from "ably/promises"
    export default async function handler(
      req: NextApiRequest,
      res: NextApiResponse
    ) {
      const token = await new ably.Rest(
        capability: {
          "*": ["subscribe"]
  1. Configure the front-end to use ably as it's subscriptionClient by adding a new useEffect hook and configure ably to use the api/getAblyToken route we've created as it's authUrl

    // src/pages/index.tsx
    import ably from "ably/promises"
    import { AblySubscriptionClient } from "remult/ably"
    useEffect(() => {
      remult.apiClient.subscriptionClient = new AblySubscriptionClient(
        new ably.Realtime({ authUrl: "/api/getAblyToken" })
    }, [])
  2. Configure remultNext to store live-queries in the dataProvider

    // src/api/[...remult].ts
    import { DataProviderLiveQueryStorage } from "remult/server"
    const dataProvider = createPostgresConnection()
    export default remultNext({
      liveQueryStorage: new DataProviderLiveQueryStorage(dataProvider)

Create a github repo

Vercel deploys automatically whenever you push to github, so the first step of deployment is to create a github repo and push all your changes to it.

Create a vercel project

  1. Create a vercel account if you don't already have one.
  2. Goto
  3. Select your github repo and click import
  4. Configure the project's name and in the > Environment Variables section, set the DATABASE_URL, NEXTAUTH_SECRET and ABLY_API_KEY environment variables
  5. Click Deploy

That's it - our application is deployed to production, play with it and enjoy.

To see a larger more complex code base, visit our CRM example project

Love Remult?  Give our repo a star.⭐

MIT Licensed | Made by the Remult team with ❤️