Setting the file. One moment.
Subchapter 157.21
troubleshooting/debugging.mdMarkdown4 KBView on GitHub
ngrok provides an HTTPS tunnel to your local server. Required because Zoom Apps need HTTPS.
# Install ngrok (https://ngrok.com)
# Then start tunnel:
ngrok http 3000Copy the https://xxxxx.ngrok.io URL.
Free ngrok URLs change every restart. You must update 4 places in Marketplace each time:
https://xxxxx.ngrok.iohttps://xxxxx.ngrok.io/authhttps://xxxxx.ngrok.ioxxxxx.ngrok.io (no protocol)Tip: Get ngrok paid plan ($8/mo) for a stable subdomain (e.g., https://myapp.ngrok.io).
In Zoom Marketplace (opens in a new tab) -> Your App:
https://xxxxx.ngrok.iohttps://xxxxx.ngrok.iohttps://xxxxx.ngrok.io/authhttps://xxxxx.ngrok.ioxxxxx.ngrok.ioappssdk.zoom.us (if using CDN)zoomapp:inmeeting (minimum required)Test your UI outside Zoom by implementing a fallback:
import zoomSdk from '@zoom/appssdk';
let isInZoom = false;
async function init() {
try {
const config = await zoomSdk.config({
capabilities: ['getMeetingContext', 'getUserContext'],
version: '0.16'
});
isInZoom = true;
initZoomApp(config);
} catch (error) {
isInZoom = false;
initBrowserPreview();
}
}
function initBrowserPreview() {
// Show mock UI with sample data for development
const mockMeeting = { meetingID: '123456789', meetingTopic: 'Test Meeting' };
const mockUser = { screenName: 'Dev User', role: 'host' };
renderApp(mockMeeting, mockUser);
console.log('Running in browser preview mode');
}The Zoom client’s embedded browser supports DevTools:
chrome://inspect in ChromeNote: DevTools availability depends on Zoom client version and settings. Not all surfaces support it.
Use .env file with dotenv:
# .env (never commit this file)
ZOOM_APP_CLIENT_ID=abc123
ZOOM_APP_CLIENT_SECRET=xyz789
ZOOM_APP_REDIRECT_URI=https://xxxxx.ngrok.io/auth
SESSION_SECRET=random-secret-string-here
ZOOM_HOST=https://zoom.us// server.js
require('dotenv').config();
// process.env.ZOOM_APP_CLIENT_ID is now availableAdd .env to .gitignore:
.env
.env.local# Terminal 1: Start server
npm run dev
# Terminal 2: Start ngrok
ngrok http 3000
# Then:
# 1. Copy ngrok URL
# 2. Update Marketplace URLs (if changed)
# 3. Open Zoom client
# 4. Click your app in sidebar or during meeting
# 5. Check the ngrok local request inspector for request logsngrok provides a local web UI that shows:
This is invaluable for debugging OAuth redirects and API calls.