{"id":21319482,"url":"https://github.com/zoom/zoomapps-serverless-vuejs","last_synced_at":"2025-07-12T04:31:54.149Z","repository":{"id":85790877,"uuid":"563668276","full_name":"zoom/zoomapps-serverless-vuejs","owner":"zoom","description":"A Serverless Zoom App built on Firebase for Zoomtopia 2022 and beyond!","archived":false,"fork":false,"pushed_at":"2024-08-01T20:46:02.000Z","size":307,"stargazers_count":6,"open_issues_count":2,"forks_count":2,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-08-01T23:03:49.495Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-09T04:26:38.000Z","updated_at":"2024-08-01T20:46:05.000Z","dependencies_parsed_at":"2024-08-01T22:39:43.809Z","dependency_job_id":null,"html_url":"https://github.com/zoom/zoomapps-serverless-vuejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fzoomapps-serverless-vuejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fzoomapps-serverless-vuejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fzoomapps-serverless-vuejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoom%2Fzoomapps-serverless-vuejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoom","download_url":"https://codeload.github.com/zoom/zoomapps-serverless-vuejs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225795415,"owners_count":17525316,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T19:42:20.787Z","updated_at":"2024-11-21T19:42:21.287Z","avatar_url":"https://github.com/zoom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zoom Apps Serverless Sample\n\nThis Zoom App sample uses Vue.js + Firebase to build a serverless Todo app that lives right in your Zoom Client\n\n![image](https://user-images.githubusercontent.com/6127137/200740037-aa985d7e-38fd-4756-869d-b6482a337054.png)\n\n## Prerequisites\n\n1. [Node JS](https://nodejs.org/en/)\n1. [Ngrok](https://ngrok.com/docs/getting-started)\n1. [Firebase Account](https://firebase.google.com/)\n1. [Zoom Account](https://support.zoom.us/hc/en-us/articles/207278726-Plan-Types-)\n1. [Zoom App Credentials](#config:-app-credentials) (Instructions below)\n    1. Client ID\n    2. Client Secret\n    3. Redirect URI\n\n## Getting started\n\nOpen your terminal:\n\n```bash\n# Clone down this repository\ngit clone git@github.com/zoom/zoomapps-serverless-vuejs\n\n# navigate into the cloned project directory\ncd zoomapps-serverless-vuejs\n\n# run NPM to install the app dependencies\nnpm install\n\n# navigate to the Cloud Functions folder\ncd functions\n\n# install Cloud Function dependencies locally\nnpm install\n\n# start the ngrok instance\nngrok http 5173\n```\n\n### Configuring Firebase\n\nTo use this codebase, make sure that you have created\na [Firebase Project](https://firebase.google.com/docs/projects/learn-more) that\nhas [hosting](https://firebase.google.com/docs/hosting), [firestore](https://firebase.google.com/docs/firestore), and\n[cloud functions](https://firebase.google.com/docs/functions) enabled.\n\n#### Firebase Config Object\n\nIn order to set up the source code with your project, make sure to replace the `firebaseConfig` object found in\nthe [firebase.config.js](firebase.config.js) file. You can find steps on obtaining the Firebase Config\nObject [here](https://support.google.com/firebase/answer/7015592#web\u0026zippy=%2Cin-this-article).\n\n### Create your Zoom App\n\nIn your web browser, navigate to [Zoom Developer Portal](https://developers.zoom.us/) and register/log into your\ndeveloper account.\n\nClick the \"Build App\" button at the top and choose to \"Zoom Apps\" application.\n\n1. Name your app\n2. Choose whether to list your app on the marketplace or not\n3. Click \"Create\"\n\nFor more information, you can follow [this guide](https://marketplace.zoom.us/docs/beta-docs/zoom-apps/createazoomapp)\ncheck out [this video series]() on how to create and configure these sample Zoom Apps.\n\n### Config: App Credentials\n\nIn your terminal where you launched `ngrok`, find the `Forwarding` value and copy/paste that into the \"Home URL\" and\n\"Redirect URL for OAuth\" fields.\n\nWhen we're running this app in development mode, we'll be using local emulators that are accessed via a reverse-proxy\nthrough our development server. This provides instant and more detailed debugging logs without having to deploy our\nlocal changes.\n\nThis means that your Ngrok URL will also point to the path for a Firebase Local Emulator. What this means is that when\nwe start our local server, the emulator will indicate that your local functions emulator is\nrunning at the following location (for example):\n\n`http://locahost:5001/[project-id]/[region]/redirectURL`\n\nWhen we start Ngrok, that means that these emulators will be available from our Ngrok instance. For that reason, our\nOAuth redirect URL will be:\n\n`https://[subdomain].ngrok.com/[project-id]/[region]/redirectURL`\n\nHere's an example of what the Home and Redirect URLs would be. If you're unsure what the redirect URL should be you can\nconfirm the Local Emulator URLs when the application is started.\n\n```\nHome URL:               https://xxxxx.ngrok.io\nRedirect URL for OAuth: https://xxxxx.ngrok.io/[project-id]/[region]/redirectURL\n```\n\n\u003e NOTE: ngrok URLs under ngrok's Free plan are ephemeral, meaning they will only live for up to a couple hours at most,\n\u003e and will change every time you reinitialize the application. This will require you to update these fields every time\n\u003e you\n\u003e restart your ngrok service.\n\n#### Production\n\nWhen it comes to running in production, the Home URL is set to the Firebase hosting URL that you have for your project.\nSimilarly, the Redirect URL is the cloud function URL that is assigned to the `redirectURL` function when you deploy\nyour app.\n\nFor this reason, when you deploy your app for the first time you will want to deploy the functions first so that you can\nconfigure the deployed cloud function Redirect URL with your Zoom App.\n\n#### OAuth allow list\n\n- `https://xxxxx.ngrok.io/[project-id]/[region]/redirectURL`\n- `https://[region]-[project-id].cloudfunctions.net/redirectURL`\n\n#### Domain allow list\n\n- `ngrok.io`\n- `fonts.googleapis.com`\n- `[region]-[project-id].cloudfunctions.net`\n\n### Config: Information\n\nThe following information is required to activate your application:\n\n- Basic Information\n    - App name\n    - Short description\n    - Long description (entering a short message here is fine for now)\n- Developer Contact Information\n    - Name\n    - Email address\n\n\u003e NOTE: if you intend to publish your application on the Zoom Apps Marketplace, more information will be required in\n\u003e this section before submitting.\n\n### Config: App Features\n\nUnder the Zoom App SDK section, click the `+ Add APIs` button and enable the following options from their respective\nsections:\n\n#### APIs\n\n- `getMeetingUUID`\n- `getUserContext`\n\n### Scopes\n\nSelect the following OAuth scopes from the Scopes tab:\n\n- `zoomapp:inmeeting`\n\n### Config Environment\n\nWhen you install dependencies in the [functions](functions) directory, three files are created: .env, .env.local and\n.secret.local\n\nThe .env and .env.local files are for storing the Redirect URL that your application uses in production and development\nenvironments respectively.\n\nWhen you first start the app, ensure these fields are populated with the Redirect URL that you use for each environment\n\n#### .secret.local\n\nThe .secret.local file is used only for development and is meant to contain your Client ID and Client Secret for your\nZoom App.\n\nWhen in production, you should be using the [Google Cloud Secret Manager](https://cloud.google.com/secret-manager) to set the secrets used by\nyour project.\n\n#### Zoom for Government\n\nIf you are a [Zoom for Government (ZfG)](https://www.zoomgov.com/) customer you can use the `ZM_HOST` variable to change\nthe base URL used for Zoom. This will allow you to adjust to the different Marketplace and API Base URLs used by ZfG\ncustomers.\n\n**Marketplace URL:** marketplace.*zoomgov.com*\n\n**API Base URL:** api.*zoomgov.com*\n\n## Start the App\n\n### Development\n\nRun the `dev` npm script to start running the app in development mode\n\n```shell\nnpm run dev\n```\n\n### Production\nRunning in production is as simple as deploying your changes to firebase and ensuring that your Zoom App is using the production firebase URLS:\n\n```shell\nnpm run deploy\n```\n\n## Usage\n\nTo install the Zoom App, Navigate to the **Home Page URL** that you set in your browser and click the link to install.\n\nAfter you authorize the app, Zoom will automatically open the app within the client.\n\n## Contribution\n\nPlease send pull requests and issues to this project for any problems or suggestions that you have!\n\nMake sure that you install packages locally to pass pre-commit git hooks.\n\n### Keeping secrets secret\n\nThis application makes use of your Zoom App Client ID and Client Secret as well as a custom secret for signing session\ncookies. During development, the application will read from the .secret.local file.\n\nIn order to align with security best practices, this application does not read from the .secret.local file in production mode.\n\n\u003e :warning: **Never commit your .secret.local file to version control:** The file likely contains Zoom App Credentials and\n\u003e Session Secrets\n\n### Code Style\n\nThis project uses [prettier](https://prettier.io/) and [eslint](https://eslint.org/) to enforce style and protect\nagainst coding errors along with a pre-commit git hook(s) via [husky](https://typicode.github.io/husky/#/) to ensure\nfiles pass checks prior to commit.\n\n### Testing\n\nAt this time there are no e2e or unit tests.\n\n## Need help?\n\nIf you're looking for help, try [Developer Support](https://devsupport.zoom.us) or\nour [Developer Forum](https://devforum.zoom.us). Priority support is also available\nwith [Premier Developer Support](https://zoom.us/docs/en-us/developer-support-plans.html) plans.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoom%2Fzoomapps-serverless-vuejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoom%2Fzoomapps-serverless-vuejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoom%2Fzoomapps-serverless-vuejs/lists"}