--- title: Deploying Real-Time Apps with Pusher Channels and Vercel description: How to get started building and deploying real-time apps with Channels on Vercel. url: /kb/guide/deploying-pusher-channels-with-vercel canonical_url: "https://vercel.com/kb/guide/deploying-pusher-channels-with-vercel" published: 2025-11-03 last_updated: 2026-07-16 authors: Allen Hai related: - /docs/projects/environment-variables/sensitive-environment-variables - /docs/cli/secrets - /docs/concepts/functions/serverless-functions/runtimes/node-js - /docs/concepts/deployments/git - /docs/concepts/deployments/preview-deployments - /docs/concepts/deployments/environments install_vercel_plugin: npx plugins add vercel/vercel-plugin --- ## Related pages > **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below. - [Deployments](https://vercel.com/docs/deployments?from=related) — Learn how to create and manage deployments on Vercel. - [Deploy from CLI](https://vercel.com/docs/projects/deploy-from-cli?from=related) — Set up and deploy a Vercel project using the CLI, from linking to production. - [How to Deploy a Brunch App with Vercel](https://vercel.com/kb/guide/deploying-brunch-with-vercel?from=related) — Create a Brunch app and deploy it live with Vercel. - [How to Deploy a Vue.js Site with Vercel](https://vercel.com/kb/guide/deploying-vuejs-to-vercel?from=related) — Create your Vue.js app and deploy it with Vercel. - [How can I use CircleCI with Vercel?](https://vercel.com/kb/guide/how-can-i-use-circleci-with-vercel?from=related) — Learn how to use CircleCI to deploy to Vercel with custom CI/CD. - [How to Deploy an Ember App with Vercel](https://vercel.com/kb/guide/deploying-ember-with-vercel?from=related) — Create an Ember app and deploy it live with Vercel. - [Create and Deploy a Crystallize E-commerce Site with Vercel](https://vercel.com/kb/guide/deploying-crystallize-with-vercel?from=related) — How to launch an e-commerce site using Next.js and Crystallize on Vercel in minutes. Full cross-link map for this page: [/kb/guide/deploying-pusher-channels-with-vercel.graph.md](/kb/guide/deploying-pusher-channels-with-vercel.graph.md) [Pusher Channels](https://pusher.com/channels) is a service that enables you to add real-time data and functionality to web and mobile apps by using [WebSockets](https://en.wikipedia.org/wiki/WebSocket). This guide demonstrates how to get started creating and deploying real-time apps with [Channels](https://pusher.com/channels) and [Vercel](https://vercel.com/). > **Note:** This guide is an overview. For the full code, see the linked example at the bottom of this page. ## Step 1: Pusher Account Setup Start by making an account on [Pusher](https://dashboard.pusher.com/accounts/sign_up) and creating a new app by clicking the **Create new app** button. Next, give your app a name and select a region. Choose a region closest to the majority of your customers to minimize latency. From your dashboard, find and click on the Channels app you just created. Next, click the **App Keys** tab. Copy these values so that you can save them as [sensitive environment variables](https://vercel.com/docs/projects/environment-variables/sensitive-environment-variables). ## Step 2: Set Up Your Project With your [Pusher Channels](https://pusher.com/channels) account and app set up, the next step is to create your project to deploy, with only a root directory for static files, and an `/api` directory for Serverless Functions. ```bash mkdir -p pusher-channels/api && cd pusher-channels ``` Create an `index.html` file in your project with the code below. ```html ``` Create an instance of a [Pusher Channels client](https://pusher.com/docs/channels/using_channels/client-api-overview) that subscribes and reacts to events on the appropriate channel. Additionally, send data to your Serverless Function that will trigger a [push event](https://pusher.com/docs/channels/using_channels/events). Create a `main.js` file where you will initialize a Channels object with your `app-key`, subscribe to the appropriate channel and bind a callback function to react to events within that channel. ```javascript // Initialize Channels client let channels = new Pusher('app-key', { cluster: 'cluster-region', }); // Subscribe to the appropriate channel let channel = channels.subscribe('channel-name'); // Bind a callback function to an event within the subscribed channel channel.bind('event-name', function (data) { // Do what you wish with the data from the event }); ``` All that's remaining on the client is to create a way to send data to your Serverless Function to trigger push events. To achieve this, add the snippet below to your `main.js` file. ```javascript async function pushData(data) { const res = await fetch('/api/channels-event', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }); if (!res.ok) { console.error('failed to push data'); } } ``` Using [Vercel CLI](https://vercel.com/cli), add the following [Secrets](https://vercel.com/docs/cli/secrets) to your account and expose them as environment variables. ```bash vercel secrets add channels-app-id [Your Channel's app ID] ``` ```bash vercel secrets add channels-app-secret [Your Channel's app Secret] ``` > **Note:** Since the `app-key` and `cluster` are already exposed on the client and are not sensitive, you **do not need** to add them as secrets. Next, create a minimal `vercel.json` file to expose your secrets as environment variables, replacing `app-key` and `cluster-region` with the values provided by Channels. ```json { "version": 2, "env": { "APP_ID": "@channels-app-id", "KEY": "app-key", "SECRET": "@channels-app-secret", "CLUSTER": "cluster-region" } } ``` Add the dependencies for the Serverless Function from inside the `/api` directory. ```bash cd api && npm init -y && npm i pusher ``` Create a `channels-event.js` file inside the `/api` directory that initializes a new Channels object and receives data from the [`req.body`](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js#node.js-helpers) [helper method](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js#node.js-helpers), before invoking [`channels.trigger`](https://github.com/pusher/pusher-http-node#publishing-events) to register the event. ```javascript const Channels = require('pusher'); const { APP_ID: appId, KEY: key, SECRET: secret, CLUSTER: cluster, } = process.env; const channels = new Channels({ appId, key, secret, cluster, }); module.exports = (req, res) => { const data = req.body; channels.trigger('event-channel', 'event-name', data, () => { res.status(200).end('sent event successfully'); }); }; ``` When `channels.trigger` is called, an event will be broadcast to all subscribed clients. ## Step 3: Deploying with Vercel To deploy your Channels app with [Vercel for Git](https://vercel.com/docs/concepts/deployments/git), make sure it has been pushed to a Git repository. Import the project into Vercel using your [Git provider](https://vercel.com/import/git) of choice. After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments#), and all changes made to the [Production Branch](https://vercel.com/docs/concepts/deployments/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).