Deployment: Web Server - 100mslive/100ms-web GitHub Wiki

Web Server

Deploying to webserver is as simple as serving the static files we built. Although, Since 100ms-web uses React-router for routing, we need to tell our webserver to forward the route requests to the app. The following example uses Nginx to demonstrate this but the mechanism is similar for other webservers too. Please refer to specific server docs for further info.

Table of Contents

Installing Nginx

A comprehensive guide on installing Nginx is beyond the scope of this wiki. Nginx has great documentation on how to do it for your favourite Operating System. Checkout their installation guide.

Getting the code onto your server

There are two ways to go about this. You can

  • Either build the webapp on your local system and copy the files to your server via SFTP using tools like Cyberduck or WinSCP.
  • or checkout the code from github(or your favourite git hosting) and build it on the server.

We recommend the 2nd approach as it is much cleaner and is also scalable in case if you prefer to automate the whole process.

Checking out the code from github

For the sake of this wiki, we are just using the default 100ms-web repo hosted in github. If you had a customized version of our app in your own repo, please use that.

git clone https://github.com/100mslive/100ms-web.git

you should see something like this

Cloning into '100ms-web'...
remote: Enumerating objects: 11149, done.
remote: Counting objects: 100% (11149/11149), done.
remote: Compressing objects: 100% (2994/2994), done.
remote: Total 11149 (delta 8119), reused 11078 (delta 8075), pack-reused 0
Receiving objects: 100% (11149/11149), 20.17 MiB | 14.05 MiB/s, done.
Resolving deltas: 100% (8119/8119), done.

Installing dependencies and building the app

once done, move into that folder

cd 100ms-web/

install the dependencies with

yarn install

or

npm install

once done, you would see something similar to this

Done in 64.31s.
ragzzy@9166:~/100ms/100ms-web$

then, build the project using

yarn build

or

npm run build

once the above command executes successfully, you should see a new build directory created. This directory contains all the files we need to deploy our app.

Setting up Nginx

NOTE:

This tutorial assume you have a fresh server with nothing else served by nginx. If you are already serving other apps on the same server using Nginx, your sites-enabled and default configuration might be different. Always backup your configurations before doing the steps below. Please refer Nginx documentation to know more.

Now that we have build our app, its time to setup Nginx, so we can serve the app. Move all the contents of the build directory to a suitable place. for this example we will use var/www/100ms-web but you can choose whatever directory you want.

 mv build/ /var/www/100ms-web

Now, we have to tell Nginx, to look for the files here. move to /etc/nginx/sites-enabled

cp /etc/nginx/sites-enabled

you can see there is already a file called default you could delete it or just back it up somewhere or just rename it to default_bkp or something similar.

Replace the content of the default with the following

server {
        listen 80;
        listen [::]:80;

        server_name mysuperawesomesite.com;
        location / {
    		root /var/www/100ms-web;
    		try_files $uri /index.html;
	}
}

NOTE:

As mentioned above, this tutorial assumes you are on a fresh install. If your default already contain configurations for other webapps hosted on the server, make sure you don't accidentally delete them or have any clash with them.

that's it. Now save the file and restart your nginx server. Depending on what systemd manager you use, this step might differ. For this example we use systemctl

sudo systemctl restart nginx.service

Setting up the environment variables

Once the server is done. We need to setup few mandatory environment variables(See Environment Variables). The simplest way is just to export them like this

export REACT_APP_TOKEN_GENERATION_ENDPOINT=<Your token generation endpoint from dashboard goes here>

but based on you preference, you could also automate this with some script when you build or in your CI/CD pipeline.

Once all of this is done, your webapp should be accessible in mysuperawesomesite.com (or whatever name you gave near the server_name attribute in your configuration). You will be welcomed with a 404 page of 100ms web. just try to enter any room with the url that looks like mysueprawesomesite.com/room-id/rolename

Troubleshooting

Here are a few common issues you could face with. If your problem is not here or if the solution didn't work for you, please reach out to us on discord.

npm/yarn issues

If you had issues running npm install or yarn install, try to delete your node-modules directory and package-lock.json(or yarn.lock) and try again.

Bash issues

Permission Denied

If you get Permission Denied error when executing any commands, make sure you have sudo access and try with sudo

Nginx Issues

500 internal Server error

This is most likely an erroneous configuration or typo in nginx config. Check if you have followed everything correctly in Setting up Nginx

403 Forbidden

This sometimes can happen when nginx don't have proper access to the static files' folder(in our case var/www/100ms-web) try to see if you got the permissions right.