Setup Zoom Rest APIs & Meeting SDK Frontend integration

Update install concurrently

Before building the frontend, we need a way to run both the server and frontend simultaneously. To achieve this, we'll use a task automation npm package called "concurrently." This package will enable us to run both the frontend and backend from the root of the application.In the root install concurrently with the following command:

npm install -d concurrently 

Modify package.json

We also will need to add concurrently to the ‘scripts’ property of your package.json file in the root. In the Package.json file, add the following to the script object to start frontend and backend:

...
"scripts": {
    "start": "nodemon backend/server.js",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm start\" \"npm run client\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

Creating a React Project

Once the backend is set up, we can proceed with developing the frontend of the application using React. We chose React primarily because of its user-friendly learning curve and ability to reuse components. The next step involves creating a React application using Create React App.

To begin, you'll need to create a new application named "frontend" on your local machine using Create React App. Simply run the following command in your terminal to create a new application and run the project:

npx create-react-app frontend
cd frontend
npm start

When the last command runs, you’ll receive output with the URL for the local development server.Open a browser to http://localhost:3000 and you’ll find your project:

Clean-up frontend

Now that you have a working React application,let's update the App.js file in your working React application by replacing the code in the src/App.js file.To update the App.js file, follow these steps:

1. Open the App.js file located in the src folder of your React application.

2.Replace the entire code block with the following:

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">

      <h1>Zoom Dev-Tools Demo</h1>
      </header>
    </div>
  );
} 

export default App;

1. Save the file and ensure that the changes have been successfully applied to your React application.

Open a browser to http://localhost:3000 and you’ll find your project

Install React Router

To enable navigation between views of different components in the React application, we need to install library to handle routing.In this tutorial we will use a widely used library called React Router. In order to use React Router, we need to run npm i react-router-dom to install React Router. Also, we will install styled-components for later use.

npm i react-router react-router-dom styled-components 

Once React Router is installed, you can import and use its components to set up the routing in your React application.

Configuring The Router

The next thing we need to do is configuring the router. Setting up your router is incredibly simple. To get started, all you need to do is import the BrowserRouter and wrap your entire application in the router.

In the Index.js file, replace the existing code block with the following code to configure the router:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Add Proxy to frontend/Package.json

To enable communication between the React application and the backend via API/HTTP requests, a Proxy Package.json file is required. To accomplish this, we must configure a proxy in the package.json file of the React project. By doing so, the application can simulate requests originating from the same server port. To configure the proxy, add the following line to your package file:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://127.0.0.1:30010", // Add this

  ....

Setup .env.local file

The last thing we need to create .env.local file to set up environment variables for the frontend application.Add the following code to the .env.local file, and insert your Zoom SDK App's Key found on the App Credentials page in the Zoom App Marketplace, Meeting SDK Signature endpoint, and the Origin Trail token enable gallery mode:

SECURITY NOTE: .env.local file is local-only and can contain sensitive variables. You should add *.local to your .gitignore to avoid them being checked into git.

REACT_APP_ZOOM_MSDK_KEY = "YOUR_ZOOM_MSDK_KEY"

REACT_APP_MSDK_SIGNATURE_ENDPOINT = "http://localhost:30010/api/zoom/msig"

REACT_APP_MSDK_ORIGIN_TRAIL =""

Root folder structure

Here's how the Root folder structure should look with frontend added:

backend/
    api/
        api.js
        ...
    controllers/
        zoomControllers.js
        ...
    middlewares/
        ...
    routes/
        zoomRoutes.js
        ...
    server.js

frontend/
    node_modules/
        ...
    public/
        ...
    src/
        components/
            index.js
            ...
    .env.local
    .gitignore
    package.lock.json
    package.json
    README.md
.env/
.gitignore
package.lock.json
package.json
README.md

Test Frontend

In the root, run the following command then navigate to your browser.

npm run dev

You should see the following :