About The Project

Welcome to my blog! I'm so happy you are interested in learning how to build on the Zoom Developer platform. In this blog, we'll be exploring Zoom Developer tools and showing you how to embed a Meeting Conference solution in your very own React Application. We'll be using Zoom's Rest APIs and Meeting SDK to integrate the Zoom Meeting SDK application into a website.

This blog is going to be a two-part series, and in each part, we'll be covering different aspects of the project. Here is the break down:

• The first part, we'll start with setting up the Node Js express backend,adding Zoom's Rest API, and the Meeting SDK JWT endpoint used for authorized use of the Meeting SDK.

• The second part, we'll move on to setting up the frontend, then we'll finish by building out the different components.

Throughout the blog post, I'll also be including links to the specific Zoom documentation that we'll be using, so you can easily reference it while building your project. So, don't worry if you're new to building apps with Zoom Developer tools, we've got you covered. We'll be explaining how React JS, Node JS, the Express JS Web Framework, and Zoom Developer tools can help you embed the Zoom Meeting and Webinar experience in your app or website.

Here's a sneak peek of what you'll be creating:

Built With

• React
• Node.js / Express
• Zoom Developer Tools:
  • Rest APIs & Meeting SDK

Prerequisites

• Node.js installed locally
• Zoom Account
• Zoom Marketplace Apps:
  • Zoom Marketplace Server-to-Server App
  • Zoom Marketplace Meeting SDK App

Getting Started

Before building with Zoom developer tools, you will need to create a Zoom account, a Zoom Marketplace server-to-server app for using Zoom Rest APIs, a Meeting SDK app to authorize your Meeting SDK, and also you need to have Node installed locally.

Need to create a Zoom account? Don't worry, you can find the links to the documentation to guide you through the process below. If you have already installed node and meet the prerequisites, you are ready to get started. Let's go!

Step 1 — Setting Up the Backend

With a React front-end connected to a Node.js / Express backend server, you've got everything you need to embed Zoom Meeting Conference into your application with ease and efficiency! Let's start by setting up the backend.

Open your terminal and create a new file directory in any location on your local machine that you find convenient. You can name it whatever you'd like, but for this example, we'll call it "zoom-clone".

  mkdir zoom-clone

Now, enter into that file directory:

  cd zoom-clone

The next step is to initialize the project with a package.json file. This file will contain some information about your app and the dependencies that it needs to run. In your text editor, run the following command :

 $ npm init

When prompted enter the package name and entry point for incoming requests:

$ package name: zoom-clone-production #Add This
$ version: (1.0.0) 
$ description: 
$ entry point: (index.js) server.js #Add This
$ test command: 
$ git repository: 
$ keywords: 
$ author: Your Name.
$ license: (ISC) 

Should now see the package.json

{
  "name": "zoom-clone",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your Name",
  "license": "ISC"
}

Step 2 — Setting Up the Node Server

To run your JavaScript code on the backend, you need to spin up a server that will compile your code. This tutorial uses a Express server with Node.js HTTP framework. Why ? Because it handles a lot of things out of the box and requires little code to create fully functional RESTful APIs.

To use Express, install it using npm. We will also install cors which is package that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

  npm i express cors

Now, create a file named server.js inside, this will be the entry point. It will handle the routing of incoming requests.

  touch server.js 

In the server.js file, type the following code and save.

const express = require("express");

const app = express();
const cors = require("cors");
app.use(cors())

app.use(express.json());

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

const port =  30010;

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

The first two lines of the code import the express module and create an Express app, named "app". This app has methods for routing HTTP requests, configuring middleware, and rendering HTML views. CORS is enabled below that to handle issues when accessing the API from different domains. The middle part of the code defines a route using the app.get() method, which returns the string "Backend is Working!" when an HTTP GET request is made to the site root. The last block starts the server on port 30010, prints a message to the console, and returns the string "Server is running on port 30010". The example response can be seen by visiting localhost:30010 in the browser

It’s time to start your server to see if it works. Open your terminal in the same directory as your server.js file and type:

  node server.js

Navigate to http://localhost:30010/, you should see the following in your browser:

Welcome to Express

Start server from the root folder

Right now, you have to restart the server every time a change is made. To automatically see updates, let's install nodemon to automatically restart Web Server.

Create a new directory named backend for your project and change into the new directory:

//
mkdir backend
cd backend

Then add the script server.js file inside, and then from the root run install nodemon as dependencies:

npm i nodemon

Then in your package.json add a start property to the script object call nodemon to start the server :

...

 "scripts": {
    "start": "nodemon backend/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

...

Now, from the root, test for automatically Web Server restart:

  npm run start

If everything goes well, you should see the Server is running on port 30010 in your terminal and 'Welcome to Express' in your browser .

Terminal

#Terminal OutPut: 

➜  zoom-clone-production npm run start

> zoom-clone-production@1.0.0 start
> nodemon backend/server.js

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node backend/server.js`
Server running on port 30010

Browser

 Browser URl : http://localhost:30010/api

 Welcome to Express

Step 3 — Zoom Developer Tools Utilities

To use Zoom's Rest API and Meeting SDK in your app or website, there are a few things we'll need to handle on the server-side app:

1.) Generating a Meeting SDK JWT Signature for authorized use of the Meeting SDK.

2.) Obtaining a Zoom Access Token to authenticate and authorize users to make requests.

The Zoom Meeting SDKs use a Meeting SDK key and secret to generate a SDK JWT for authorized use of the Meeting SDK. And the Zoom API uses the OAuth 2.0 authorization framework (rfc6749) to authenticate and authorize users to make requests. If you're new to Meeting SDKs authorization and OAuth 2.0, don't worry! I'll be providing links to the documentation to help you understand it better.

• Meeting SDKs Authorization

• Zoom API OAuth 2.0

Setup .env file

It is important to keep API keys and other sensitive information in a separate file. It is also best practice to keep this information separate from version control for security reasons. The .env file provides a centralized location for storing environment variables, allowing for easy access and management of sensitive information. Additionally, using a .env file helps to keep sensitive information organized and secure, ensuring that it is not accidentally committed to version control.

To implement this solution, let's add a create a .env file in the root of the app:

  touch .env
  npm i dotenv

Then, add your variables and values to it:

PORT = 30010

Now, in the backend/server.js, import dotnet.env:

const express = require("express");
const app = express();

const cors = require("cors");
const dotenv = require("dotenv");

dotenv.config();
const port = process.env.PORT || 30015;
app.use(cors())
app.use(express.json());

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Structure backend folders

When it comes to structuring the backend folders for a Node.js Express application that integrates with a third-party API, it's important to organize your code into separate folders to make it easier to manage and maintain. By breaking your code into smaller, more manageable pieces, you can ensure that your code is easy to understand and debug. So let’s create the following folders directories:

• routes - contains the routing logic for your application.

• api - contains API calls to Zoom Rest API services

• zoomControllers - contain business logic functions for making API calls or processing data

• middleware - contains the middleware functions for your application

Create API Directory

Create API directory along with the associated api.js file.

// Working Directory : backend/

mkdir api
cd api
touch zoomAPI.js

Within the API folder, add the following code to the zoomAPI.js file.

 // Working Directory : backend/api/
 // File: zoomAPI.js


 const thirdPartyAPICall = () => {
    try {

        // Make API Call Here 
      return "Third Party API Call";
    } catch (err) {
      // Handle Error Here
      console.error(err);
    }
  };

  module.exports = {
    thirdPartyAPICall,
  };

Create controllers Directory

Create controllers directory along with the associated zoomControllers.js file.

// Working Directory : backend/
// File: zoomControllers.js

mkdir controllers 
cd controllers
touch zoomControllers.js

Within the Controllers folder,add the following code to the zoomControllers.js file.

// Working Directory : backend/controllers/
// file: zoomControllers.js

const asyncHandler = require("express-async-handler");
const {
  thirdPartyAPICall,
  } = require("../api/zoomAPI.js");


const ThirdPartyAPICall = asyncHandler(async (req, res) => {

    const thirdPartyAPI = thirdPartyAPICall();

    if (thirdPartyAPICall === undefined) {
        res.status(400);
        throw new Error("No API Call found");
      } else {
        res.status(201).json({ thirdPartyAPI });
      }
  });

  module.exports = {
    ThirdPartyAPICall,
  };

Create routes Directory

Create routes directory along with the associated zoomRoutes.js file.

// Working Directory : backend/
// File: zoomRoutes.js

mkdir routes 
cd routes
touch zoomRoutes.js

Within the routes folder,add the following code to the zoomRoutes.js file.

// Working Directory : backend/routes/
// file: zoomRoutes.js

const express = require('express');
const router = express.Router();
const {

    ThirdPartyAPICall,

  } = require("../controllers/zoomControllers.js");

router.route('/').post();

// Get routes Test with Postman
router.route("/thirdparty").get(ThirdPartyAPICall);

module.exports = router; // Export the router so it can be used in server.js

In the backend/server.js, add this following line:

...
const zoomRoutes = require("./routes/zoomRoutes")

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.use("/api/zoom", zoomRoutes); // Add this line

...

Backend folder structure

Here's how the backend folder structure should look:

backend/
    api/
        zoomAPI.js
        ...
    controllers/
        zoomControllers.js
        ...
    middlewares/
        ...
    routes/
        zoomRoutes.js
        ...
    server.js
 node_modules
 .env
 .gitignore
 package.lock.json
 package.json
 README.md

Be sure to keep the API keys and other sensitive information in a .env file, and not to include it in version control.

Testing the API

npm i express-async-handler
npm run start  

Now, open postman, create a GET method and navigate to http://localhost:30010.

Test all the API endpoints and make sure they are working. For the endpoints that require body, send JSON back with the necessary fields since it’s what you set up in your code.

Sample GET request:

GET localhost:30010/api/zoom/thirdparty
Body
raw

Sample GET value:

{
    "thirdPartyAPI": "Third Party API Call"
}

Conclusion

In this tutorial, you were guided through the process of setting up Node.js Express and organizing your files in a way that makes maintenance a breeze. You also learned how to use the .env file to securely store sensitive information such as API keys and secrets.

In the next tutorial, you'll delve deeper into the application by adding the backend logic. See you in the next tutorial.