VIDCS-3721: improvements-documentation-video-api-example #163

johnny-quesada-developer · 2025-05-12T10:00:06Z

What is this PR doing?

Removed the default * (catch-all) route for unfound API endpoints. This behavior was not API-friendly and caused confusion.

Fixed project scripts: some were intended to run both the backend and frontend simultaneously, but Bash is not concurrent by default. We now use concurrently (via npm) to achieve the desired result.

Added a script for debugging the backend project.

Updated the README to make the tutorial more detailed and beginner-friendly.

Readme now includes a clearer explanation of where and how to retrieve the necessary Vonage credentials.

Added steps for testing the app with multiple devices on a local network.

How should this be manually tested?

Follow the readme and the app should run

What are the relevant tickets?

Resolves VIDCS-3721

Checklist

[x] Branch is based on develop (not main).
[ ] Resolves a Known Issue.
[ ] If yes, did you remove the item from the docs/KNOWN_ISSUES.md?
[ ] Resolves an item reported in Issues.
If yes, which issue? Issue Number?

VIDCS-3292: Push the new workflow and fixes to main

VIDCS-3367: Update main branch for VERA 1.0.1

VIDCS-3438: Update main branch for VERA 1.0.2

VIDCS-3583: Release Reference App 1.1.0

VIDCS-3711: Update main branch with VERA 1.1.1

johnny-quesada-developer · 2025-05-12T10:01:25Z

README.md


-Add your Vonage Video API credentials to the newly created .env file.


Add your Vonage Video API credentials to the newly created .env file.

It wasn't clear enough, -add your credentials- which credentials? from where and how can I get them?

Specificity on the steps make it more beginner friendly.

johnny-quesada-developer · 2025-05-12T10:02:06Z

README.md

+<img src="./docs/assets/readme/1-dashboard-applications.png" alt="Applications dashboard" style="max-width: 100%; height: auto;" />
+</details>
+
+If you don’t already have an application, create a new one:


steps how to create a new app if there is not already one. This info is present in some of the getting started documents but not in the example app

johnny-quesada-developer · 2025-05-12T10:02:23Z

README.md

+
+Refer to the following image for visual guidance:
+
+<details open>


visual guidelines for the minimum configuration that the example app needs.

johnny-quesada-developer · 2025-05-12T10:02:38Z

README.md

+In the root project directory, create the environment files by running:
+
+``` bash
+cp backend/.env.example backend/.env && cp frontend/.env.example frontend/.env


create both .env files in one command.

johnny-quesada-developer · 2025-05-12T10:03:31Z

README.md


-#### Installing dependencies
+- **VONAGE_APP_ID** – This is the ID of your Vonage application. You can find it on the [Applications page](https://dashboard.vonage.com/applications).


specify which are the keys on the backend/.env that are required... for the basic configuration there is no need of modify the frontend/.env so better to don't mention it to avoid unnecessary complexity.

johnny-quesada-developer · 2025-05-12T10:03:53Z

README.md

-```console
+#### Start in Development Mode
+
+``` bash
 yarn dev


this command remain the same, but the source was changed, please check the package.json

johnny-quesada-developer · 2025-05-12T10:04:04Z

README.md


-#### Production mode
+### 5. Testing on Multiple Devices


adding extra step for testing with multiple devices on local network... a couple of simple extra steps allow the developer to test creating a conference with multiple devices, this is a more accurate real-word example more likely to catch the attention of whom is testing our API.

johnny-quesada-developer · 2025-05-12T10:04:36Z

backend/package.json

    "start": "node --import tsx index.ts",
+    "debug": "node --inspect --watch --import tsx index.ts",


command to debug the backend with chrome inspector

johnny-quesada-developer · 2025-05-12T10:04:47Z

backend/server.ts

@@ -27,10 +27,6 @@ app.use((_req, res, next) => {

 app.use(express.static(path.join(dirName, './dist')));

-app.get('/*', (_req: Request, res: Response) => {


this can create confusion and is not API friendly, in an API if someone request a router that doesn't exists it should return not found... with this is returning basically and arbitrary html

johnny-quesada-developer · 2025-05-12T10:05:00Z

frontend/package.json

@@ -7,7 +7,7 @@
  "scripts": {
    "build": "vite build && yarn cp-build",
    "cp-build": "mkdir -p ../backend/dist && cp -r dist ../backend",
-    "dev": "vite",
+    "dev": "vite --host",


host is needed for the multiple devices example, and it doesn't affect the basic local example.

johnny-quesada-developer · 2025-05-12T10:05:21Z

frontend/vite.config.ts

+  return mergeConfig(vitestConfig, {
+    server: {
+      host: true,
+      allowedHosts: ['*', env.VITE_NGROK_DOMAIN],


for local host "*" works, but for the ngrok domain we need to add it specifically otherwise vite will reject it... the steps for how and why to do this are on the new version of the readme

johnny-quesada-developer · 2025-05-12T10:05:33Z

package.json

@@ -15,17 +15,19 @@
  "scripts": {
    "build": "yarn workspace frontend build",
    "deploy-vcr": "vcr deploy",
-    "dev": "yarn && yarn workspace frontend dev & yarn workspace backend dev",


this script was wrong, the intention was to run both project simultaneously but the terminal is not multiprocess by default.

we added concurrently as a dev dependency to achieve the desire result.

johnny-quesada-developer · 2025-05-12T10:05:45Z

package.json

    "docs": "yarn workspace frontend docs",
    "docs:watch": "yarn workspace frontend docs:watch",
    "lint": "ESLINT_USE_FLAT_CONFIG=false yarn eslint . --ext .ts,.tsx",
    "lint:filenames": "./scripts/lintFileNames.sh",
    "lint:fix": "yarn prettier --write . && yarn lint --fix",
    "postinstall": "husky",
    "run-server": "yarn workspace backend start",
-    "start": "yarn workspace frontend build && yarn workspace backend start",


the backend run doesn't need to build the FE

johnny-quesada-developer · 2025-05-12T10:05:55Z

package.json

    "start:frontend": "yarn workspace frontend dev",
+    "forward:frontend": "npx ngrok http 5173",


command for forward the port 5173 to be able to test the vite project as a https site.

johnny-quesada-developer · 2025-05-12T10:06:07Z

package.json

@@ -68,6 +70,7 @@
    "husky": "^9.0.11",
    "license-checker": "^25.0.1",
    "lint-staged": "^15.2.2",
+    "concurrently": "^9.1.2",


allows to run multiple scripts in one terminal/command line

behei-vonage

great job so far! left a few comments. let me know what you think

behei-vonage · 2025-05-12T14:24:54Z

README.md


- In project directory, create the environment variables for the project.
+To get started, make sure you have a Vonage account. You can create one at the [Vonage API Dashboard](https://dashboard.vonage.com/applications). The sign-up process is straightforward.


I think we can skip on mentioning the following: The sign-up process is straightforward.

behei-vonage · 2025-05-12T14:26:17Z

README.md


-```console
-cp frontend/.env.example frontend/.env
+<details open>


I think this one and others should be closed by default and not open to be consistent and to make the page too crowded with the screenshots

behei-vonage · 2025-05-12T14:27:45Z

README.md


-#### Dev mode
+This command installs all necessary dependencies. For details about the packages used, refer to [Dependencies](./docs/DEPENDENCIES.md).


The way it was worded before was fine - I don't think there is a need to change it.

behei-vonage · 2025-05-12T14:29:04Z

README.md

-yarn start
+#### Steps:
+
+1. Create an account at [ngrok](https://dashboard.ngrok.com/signup) if you haven’t already (The free tier allows you to have one public tunnel).


I'd avoid mentioning what ngrok allows on their free tier as that can change at any time. I'd also like to hear from other reviewers if this section is needed.

behei-vonage · 2025-05-12T14:30:15Z

frontend/.env.example

@@ -9,3 +9,7 @@ VITE_ENABLE_REPORT_ISSUE=false
 # This is meant for development only.
 # Note: this only works when opening a room url directly, not when navigating via the landing page.
 VITE_BYPASS_WAITING_ROOM=false
+
+# For testing with multiple devices, you can use ngrok to expose your vite server to the internet.
+# your can see more information on how this works at https://ngrok.com/docs/


I'd change this

your can see more information on how this works at https://ngrok.com/docs/

to something like this:

Please refer to https://ngrok.com/docs/ for more information.

behei-vonage · 2025-05-12T14:33:38Z

I also noticed that integration tests are failing now. I wonder if it has to do with the changes that are done in the package.json

Removed the default * (catch-all) route for unfound API endpoints. This behavior was not API-friendly and caused confusion. Fixed project scripts: some were intended to run both the backend and frontend simultaneously, but Bash is not concurrent by default. We now use concurrently (via npm) to achieve the desired result. Added a script for debugging the backend project. Updated the README to make the tutorial more detailed and beginner-friendly. Readme now includes a clearer explanation of where and how to retrieve the necessary Vonage credentials. Added steps for testing the app with multiple devices on a local network.

cpettet

Looks good so far! Just have a few comments/questions. Let me know what you think!

cpettet · 2025-05-12T18:24:39Z

README.md

@@ -114,49 +114,105 @@ The Vonage Video API Reference App for React is currently supported on the lates

 ## Running Locally

-### Config
+### 1. Ensure You Have a Vonage Account


Could you re-generate the TOC? A few of the links changed in this PR are now broken. See the updated README here.

We've been using this extension.

Hi @cpettet , thanks, is updated now.

cpettet · 2025-05-12T18:25:32Z

README.md

+<img src="./docs/assets/readme/3-create-app-form.png" alt="Create app form" style="max-width: 100%; height: auto;" />
+</details>
+
+### 3. Environment Variable


Nit

Suggested change

### 3. Environment Variable

### 3. Environment Variables

cpettet · 2025-05-12T18:26:17Z

README.md


- In project directory, create the environment variables for the project.
+To get started, make sure you have a Vonage account. You can create one at the [Vonage API Dashboard](https://dashboard.vonage.com/applications).


Nit, we're repeating the section heading. Maybe simplify to:

Suggested change

To get started, make sure you have a Vonage account. You can create one at the [Vonage API Dashboard](https://dashboard.vonage.com/applications).

You can create one at the [Vonage API Dashboard](https://dashboard.vonage.com/applications).

cpettet · 2025-05-12T18:31:51Z

frontend/.env.example

+
+# For testing with multiple devices, you can use ngrok to expose your vite server to the internet.
+# Please refer to https://ngrok.com/docs/ for more information.
+VITE_NGROK_DOMAIN=332a-45-137-35-107.ngrok-free.app


Could we remove this domain and use an empty string instead, similar to how we have the app ID?

cpettet · 2025-05-12T18:35:15Z

package.json

@@ -15,7 +15,7 @@
  "scripts": {
    "build": "yarn workspace frontend build",
    "deploy-vcr": "vcr deploy",
-    "dev": "yarn && yarn workspace frontend dev & yarn workspace backend dev",
+    "dev": "concurrently 'yarn workspace frontend dev' 'yarn workspace backend dev'",


Could we add yarn before this command so that all packages are installed? It's a little easier for us to just run yarn dev.

the integration test command needs to build and then start

attending feedback readme - fixing TOC - adding yarn to dev script, renaming VITE_NGROK_DOMAIN to VITE_TUNNEL_DOMAIN

sonarqubecloud · 2025-05-13T00:16:50Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

dwivedisachin and others added 5 commits January 30, 2025 23:00

Merge pull request #31 from Vonage/develop

a0c2287

VIDCS-3292: Push the new workflow and fixes to main

Merge pull request #55 from Vonage/develop

e833b39

VIDCS-3367: Update main branch for VERA 1.0.1

Merge pull request #86 from Vonage/rc-1.0.2

8a0f5ef

VIDCS-3438: Update main branch for VERA 1.0.2

Merge pull request #149 from Vonage/develop

8ce835d

VIDCS-3583: Release Reference App 1.1.0

Merge pull request #157 from Vonage/develop

4d9a3a3

VIDCS-3711: Update main branch with VERA 1.1.1

johnny-quesada-developer self-assigned this May 12, 2025

johnny-quesada-developer added documentation Improvements or additions to documentation patch release Label for patch release of application labels May 12, 2025

github-actions bot changed the base branch from main to develop May 12, 2025 10:00

johnny-quesada-developer commented May 12, 2025

View reviewed changes

johnny-quesada-developer force-pushed the VIDCS-3721-improvements-documentation-video-api-example branch from 633ccdc to 9d421cf Compare May 12, 2025 11:22

johnny-quesada-developer requested review from dwivedisachin and behei-vonage May 12, 2025 13:11

behei-vonage changed the title ~~VIDCS-3721-improvements-documentation-video-api-example~~ VIDCS-3721: improvements-documentation-video-api-example May 12, 2025

behei-vonage reviewed May 12, 2025

View reviewed changes

johnny-quesada-developer force-pushed the VIDCS-3721-improvements-documentation-video-api-example branch from 9d421cf to f30300f Compare May 12, 2025 14:44

cpettet reviewed May 12, 2025

View reviewed changes

fixes on playwright.config.ts

cc0758c

the integration test command needs to build and then start

johnny-quesada-developer force-pushed the VIDCS-3721-improvements-documentation-video-api-example branch from b2fc2b5 to cc0758c Compare May 12, 2025 19:10

VIDCS-3721-improvements-documentation-video-api-example

20c88a1

attending feedback readme - fixing TOC - adding yarn to dev script, renaming VITE_NGROK_DOMAIN to VITE_TUNNEL_DOMAIN

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VIDCS-3721: improvements-documentation-video-api-example #163

VIDCS-3721: improvements-documentation-video-api-example #163

johnny-quesada-developer commented May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

johnny-quesada-developer May 12, 2025

behei-vonage left a comment

behei-vonage May 12, 2025

behei-vonage May 12, 2025

behei-vonage May 12, 2025

behei-vonage May 12, 2025

behei-vonage May 12, 2025

behei-vonage commented May 12, 2025

cpettet left a comment

cpettet May 12, 2025

johnny-quesada-developer May 13, 2025

cpettet May 12, 2025

johnny-quesada-developer May 13, 2025

cpettet May 12, 2025

johnny-quesada-developer May 13, 2025

cpettet May 12, 2025

johnny-quesada-developer May 13, 2025

cpettet May 12, 2025

johnny-quesada-developer May 13, 2025

sonarqubecloud bot commented May 13, 2025


		Add your Vonage Video API credentials to the newly created .env file.


		Refer to the following image for visual guidance:

		<details open>


		#### Installing dependencies
		- VONAGE_APP_ID – This is the ID of your Vonage application. You can find it on the [Applications page](https://dashboard.vonage.com/applications).

		"start": "node --import tsx index.ts",
		"debug": "node --inspect --watch --import tsx index.ts",

		@@ -27,10 +27,6 @@ app.use((_req, res, next) => {

		app.use(express.static(path.join(dirName, './dist')));

		app.get('/*', (_req: Request, res: Response) => {

		"start:frontend": "yarn workspace frontend dev",
		"forward:frontend": "npx ngrok http 5173",


		In project directory, create the environment variables for the project.
		To get started, make sure you have a Vonage account. You can create one at the [Vonage API Dashboard](https://dashboard.vonage.com/applications). The sign-up process is straightforward.


		#### Dev mode
		This command installs all necessary dependencies. For details about the packages used, refer to [Dependencies](./docs/DEPENDENCIES.md).

	To get started, make sure you have a Vonage account. You can create one at the [Vonage API Dashboard](https://dashboard.vonage.com/applications).
	You can create one at the [Vonage API Dashboard](https://dashboard.vonage.com/applications).

VIDCS-3721: improvements-documentation-video-api-example #163

Are you sure you want to change the base?

VIDCS-3721: improvements-documentation-video-api-example #163

Conversation

johnny-quesada-developer commented May 12, 2025

What is this PR doing?

How should this be manually tested?

What are the relevant tickets?

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

behei-vonage left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

behei-vonage commented May 12, 2025

cpettet left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarqubecloud bot commented May 13, 2025

Quality Gate passed