Zoom Contact Center : React + Vite

This sample app uses Node.js + Express + React using Vite to build a Zoom Contact Center demo. The template used provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Prerequisites

1. Node JS
2. Ngrok
3. Zoom Account
4. Zoom App Credentials (Instructions below)
   1. Client ID
   2. Client Secret
   3. Redirect URI

Getting started

Open your terminal:

# Clone down this repository
git clone https://github.com/zcc-react-demo

# navigate into the cloned project directory
cd zcc-react-demo

# run NPM to install the app dependencies
npm install

Zoom for Government

If you are a Zoom for Government (ZfG) customer you can use the ZM_HOST variable to change the base URL used for Zoom. This will allow you to adjust to the different Marketplace and API Base URLs used by ZfG customers.

Marketplace URL: marketplace.zoomgov.com

API Base URL: api.zoomgov.com

Start the App

Development

Run the dev npm script to start in development mode using a Docker container.

npm run dev

The dev script will:

1. Watch React files and build to the dist/ folder
2. Watch Server files and build to the dist/ folder
3. Start the server and webpack dev server

Keeping secrets secret

This application makes use of your Zoom App Client ID and Client Secret as well as a custom secret for signing session cookies. During development, the application will read from the .env file. ;

In order to align with security best practices, this application does not read from the .env file in production mode.

This means you'll want to set environment variables on the hosting platform that you' re using instead of within the .env file. This might include using a secret manager or a CI/CD pipeline.

⚠️ Never commit your .env file to version control: The file likely contains Zoom App Credentials and Session Secrets

Code Style

This project uses prettier and eslint to enforce style and protect against coding errors along with a pre-commit git hook(s) via husky to ensure files pass checks prior to commit.

Testing

At this time there are no e2e or unit tests.

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.

Documentation

Make sure to review our documentation as a reference when building your Zoom Apps.