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.

Prerequisites

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:

https://github.com/zoom/zoomapps-sample-js

Use NPM to install dependencies:

$ npm install

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
ZM_CLIENT_ID=

# Client Secret for your Zoom app
ZM_CLIENT_SECRET=

# Redirect URI set for your app in the Zoom Marketplace
ZM_REDIRECT_URL=

# Sign Session Cookies
SESSION_SECRET=3e571b471f611f7cae69cadcaa786e82a93609ffdcfe9bab93bf52f356a4d9ae

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

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

Using the App

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

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:

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

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!