DEV Community

Max Mansfield for Zoom

Posted on • Updated on

How to Setup the Basic Zoom App Sample

Welcome to part 3 of our Getting Started with Zoom Apps series! Part one of our series covered an overview of Zoom Apps, and in part two, we even created one. This section will look at setting up and running our sample Hello World Zoom App.

If you're following along, you should have the Client ID and Client Secret from your Zoom App and an OAuth Redirect URL from a running Ngrok tunnel.


  • Node.JS (NPM)
  • A Zoom App on the Zoom Marketplace
  • Client ID and Client Secret
  • Redirect URL

About the App

The sample Zoom App code we will be running today uses vanilla JavaScript and Express to demonstrate the bare minimum code needed to get up and running while still following best practices.

On that note, this app doesn't really do much. It's a template for other sample applications and is designed to be extensible. 

Setup and Install

Now we're going to set up the code needed to run the app and all the dependencies. First, clone the git repository found here:

Use NPM to install dependencies:

$ npm install
Enter fullscreen mode Exit fullscreen mode

Add Credentials

Installing dependencies creates the .env file that holds our application secrets while developing in a secure environment. 

Open the .env file and follow the instructions to fill out the fields. The SESSION_SECRET field will already have a random value generated for development.

# Client ID for your Zoom App

# Client Secret for your Zoom app

# Redirect URI set for your app in the Zoom Marketplace

# Sign Session Cookies
Enter fullscreen mode Exit fullscreen mode

Start the App

Run the app in development mode to use the credentials from the .env file and watch for changes to files:

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

This starts our app on port 3000 by default, but you can set the PORT environment variable to change that.

Image description

Using the App

Navigate to your Ngrok URL in your browser to display your Zoom App home page:

Image description

Our Zoom App knows that we're running it from the browser and gives us the option to install the app. 

Click the install link and follow the prompts to authorize the app. If you authorized your app when creating it, then this will open your app in the Zoom Client:

Image description

Now, you can see our Zoom App is running directly from Zoom!

Image description

Great job! You've created, installed, and run your Zoom App. Feel free to take a look at the code, and please see our next section for information on how you can continue your journey as a Zoom App Developer.

Continue Learning

Thank you for reading through this three-part series introducing Zoom Apps! I hope this series has been helpful and you're inspired to create something awesome with all the tools that Zoom Apps provides. 

I've included links to our documentation and further resources on learning about Zoom. Happy Coding!


Video Guides

Sample Apps

Top comments (0)