--- 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" 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 --- [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. `mkdir -p pusher-channels/api && cd pusher-channels` Create an `index.html` file in your project with the code below. ` ` 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. `// 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. `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. `vercel secrets add channels-app-id [Your Channel's app ID]` `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. `{ "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. `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. `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).