Getting Started

---

⚠️This wiki is still under construction. Some information might be incomplete. Please do not use this as reference at the moment.

---

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

Table of Contents

• Prerequisites
• Cloning the repo
• Setting environment variables
• Getting the token generation endpoint

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 v12.13.0 or greater installed on your system.
• yarn

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-v2.git

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

cd 100ms-web-v2
yarn install

or

cd 100ms-web-v2
npm install

---

Note: 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. Until then, either use yarn install or use npm install --legacy-peer-deps

---

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 variableis 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 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 https://localhost:3000/. You should see a warm 404 Error welcoming you.

💡	404 Error

Please ignore the 404 message, you need to join the right URL of the room. Next section describe how to create a room and form the correct URL