Getting Started with the Vonage Video Reference App for React

We want you to be able to start working with our APIs as quickly as possible, but sometimes, that can seem like a daunting task. While some APIs only require one or two lines of code (I'm looking at you Messages API), some APIs, by their very nature, require some more setup. The Vonage Video API can be one of the more seemingly daunting APIs.

Fear not! Not only do we have sample backends and sample front-end code, but you might want to see or start with a more fully-featured application. For that, we have our Vonage Video Reference Application for React. It is an application that is designed to be ready to use out of the box so that you can learn how to build your own application or can be used as a basis for your own needs.

We offer two different ways to check out the Reference Application in only a few minutes. By the end of this article you will have a running version of our Reference Application for React running in either our Cloud Runtime hosting product or on your local machine.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Running on Vonage Cloud Runtime

You can use Vonage's Cloud Runtime platform to handle running the application and provide hosting for the application while you look around with the Reference App if you do not want to or cannot run the application on your local machine. This launches an in-browser editor and system to deploy your code. Since this launches an in-browser editor, it is recommended to use Chrome or a Chrome-based browser.

To run the application in Cloud Runtime:

1. Head over to the Vonage Video API Reference App for React page on Cloud Runtime. 

2. Click on “Sign In to get started”, if you're not already signed in.

3. Click on the "Get Code" tab just under the heading of the page.

4. Click on the "Create a new development environment" button.

5. Select the Region and enter in a workspace name, like "video-reference-demo" and click "Continue".

6. Cloud Runtime will create a workspace for you with a code editor and set up all of the authentication for your project.

7. Go to "View" at the navigation bar at the top, and then click on "Terminal" to display the workspace terminal.

8. Run the application with yarn deploy-vcr.

Cloud Runtime's code editor may require you to enable third-party cookies, and if it detects that they are blocked, you may get a pop-up explaining how to enable them. This is due to the Visual Studio Code web editor itself, and not enabling third-party cookies may impact using the Cloud Runtime. If this is a privacy issue for you, please check out how to run the code locally or on a server.

Cloud Runtime will package up the project, submit it to the hosting platform, and build the application. This may take a few minutes to finish. Once it is finished, you will see something similar to the following:

/-------
| Instance has been deployed!
| Instance id: 503d54fc-5bec-xxxx-xxxx-24fb10ee0e48
| Instance service name: neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app
| Instance host address: https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud
\-------

The very end will be a URL to your running instance, in this case, it is https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud. You can copy this URL, open a new tab or window, and paste it into the address bar. You should see the Reference App's start screen:

Vonage Video Reference App for React Landing Page

You can now start to use the Reference App to see what all features it contains and even evaluate If it works as a basis for your project. You can create a new room and check out what kind of features are available for video meetings, and even invite people to join. Almost all the major features that our video platform provides are available.

You can drop back to Cloud Runtime and investigate the code. This will let you customize the application to your own needs, or just see how the different parts of the code function.

If you make any changes to the code, you can simply run yarn deploy-vcr to deploy your changes back to the hosting platform. Due note that editing a file will not be immediately available, you will need to deploy the code before it is usable in the browser.

If you want to get back to the code view to edit or re-deploy code, you can head to your Workspaces page, and you will see a card for your workspace:

Example Instance Card for the Reference App in Cloud Runtime

You can get to the code itself by clicking on the tile, but if you just want to see the running instance, you can click the kebab menu (the 3 circles in the upper right corner) and click "Copy URL."

Running Locally

To run locally, you will need the following already pre-installed:

• Node.js v22

• Yarn

• Git

• A command line terminal

• A Vonage Application and its associated Private Key

These directions assume that you have a local terminal installed and a basic working knowledge of how to use your shell. The example commands should work for a Linux, WSL, or macOS terminal. If you are using Powershell or CMD, you may need to modify the commands.

You can create a Vonage Application through the Vonage Dashboard or by using the Vonage CLI.

Once you have all of the pre-requisites installed:

1. Head on over to the vonage-video-react-appGitHub Repository

2. Click on the green "Code" button, and in the dropdown that appears, click the "Copy" icon next to the address. If you are logged into GitHub, it may show an SSH address, or if you are logged out, it may show an HTTPS address. Either will work.

3. On your PC, open up a terminal window.

4. Change to the directory where you would like to install the reference application.

5. Clone the Reference application project using git clone and the address we just copied:

gitclonegit@github.com:Vonage/vonage-video-react-app.git

1. Change directory into the vonage-video-react-app/ directory.

2. Copy the default configuration files, we use cp in UNIX machines. 

cpbackend/.env.examplebackend/.env

cp frontend/.env.example frontend/.env

1. Open the backend/.env/ file and edit the following two lines using your Application ID and Private Key. They should be near the top of the file.

VONAGE_APP_ID=''

VONAGE_PRIVATE_KEY=''

1. In the root of the cloned project, install the dependencies:

yarn

1. Run the development server:

yarn dev

1. Once the application has finished bootstrapping, it will give you a "Local" address to visit. Assuming nothing else is running on your machine, you should be able to visit http://localhost:5173/ and see the create room screen:

Explore and Experiment

No matter which way you decide to install and use the Reference Application, you have the freedom to explore and experiment with the code. You can check out how to implement various front-end options with React and how to set up a backend server that handles all of the management functions for you.

Conclusion

Fancy chatting with us about the reference app? Join our thriving Developer Community on Slack, follow us on X (formerly Twitter), or subscribe to our Developer Newsletter. Stay connected, share your progress, and keep up with the latest developer news, tips, and events!