Getting Started - 100mslive/100ms-web GitHub Wiki

In this section we will setup our app and run it.

Table of Contents

Prerequisites

100ms-web is a react application and need the following to setup the app up and running on your development environment. You will need

  • Node.js version v16.7.0 or greater installed on your system.
  • yarn

Note (npm users only)

if you are using npm, it is a hard dependency to use node v16.7.0 (npm v7.20.0) because of some peer-dependency issues

There are other dependencies like webpack but these are installed automatically when we do yarn install

Cloning the repo

Get the code by cloning this repo using git.

git clone [email protected]:100mslive/100ms-web.git

Once cloned, open a terminal in the project directory, and install dependencies with:

cd 100ms-web
yarn install

or

cd 100ms-web
npm install

Note(ERR! unable to resolve dependency tree error):

npm install might fail because some of our dependency libraries haven't updated their peer dependencies to React 18. This should automatically get fixed when the respective authors update their libraries. Currently, this issue could be fixed by installing atleast node v16.7.0. Although, we recommend using yarn instead of npm if you can.

Setting environment variables

Environment variables let you customize the app and set important things like token generation endpoint(see below). We have a example.env as a template to help you get started with.You can add remove stuff to it as per your needs. To begin with, create a new file .env and copy the values from example.env

cp example.env .env

⚠️ Note:

  • if you change your environment variables, your webapp must be restarted using yarn start. Otherwise, the changes won't take effect. Similarly, you might want to redeploy your app when using services like Vercel for new/updated environment variables to take effect.

  • The above method of setting the environment variables for your local development. Depending on what service/method you use for deployment (i.e) Netlify, Vercel, Nginx etc, setting up environment variables may be similar or different. See Building and deployment for specific instructions or instructions provided by specific providers.

Getting the token generation endpoint

Get your token endpoint from the Developer section of 100ms' Dashboard download Update the REACT_APP_TOKEN_GENERATION_ENDPOINT in .env file with the above token endpoint value (eg. https://prod-in.100ms.live/hmsapi/example.app.100ms.live/)

Run the app

Then start the app with:

yarn start

The app now should be running at http://localhost:3000/. You should see a Welcome message saying "Almost There!". Follow the instructions on the page to create a new room. You could also visit the Next section to see how to create a room
Next Section Creating and Joining the Room
Previous Section Home