n.exchange front-end client setup on a server

After recently publishing a video tutorial (see below) on how to set up your own exchange using our front-end client we got a lot of questions, most of them in regards to how to setup the client on a server.

Tutorial on how to set up your own crypto exchange in 1 hour

Thus, to avoid writing the same answers over and over again and save everyone’s time, here is another tutorial on how to setup the front-end client on a Digital Ocean server for the cost of $5/month.

Step 1 - Prepare build directory

First step is to get the build directory ready. Do so by running npm run build command from root of the project repository i.e. from within nexchange-open-client-react.

Creating the front-end client build directory

Once you do that, you will see that builddirectory contains lots of files. Since our exchange front-end client is written in ReactJS and thus is a single page application, our server only needs to serve index.html and that’s it. Pretty simple I say.

Build directory and its contents

Step 2 - Create a droplet

Droplet is a fancy name that Digital Ocean calls its cloud servers. By creating a droplet you are essentially creating a server for your exchange.

First step to creating the droplet.

Below you can see the droplet settings that were used.

Droplet configuration. Choose data centre closest to you.

Step 3 - Login to your droplet

After creating the droplet you will receive password to your email. Take a note of that. Then copy IP address of your droplet which can be found next to your droplet’s name.

IP address of the droplet

Once you got the IP address, go to terminal and type ssh root@IP_ADDRESS . You will be asked for the current UNIX password which you received on email. After that, you will have to type a new password. Once that’s done, you are inside. This is where the fun starts!

Logging in to your server via SSH

Step 4 - Install nginx

For those not familiar with nginx, it’s an open source, lightweight, high-performance web server. This is what will serve our exchange, or in this case the index.html file.

To install nginx, follow these steps:

1. sudo apt-get update — update existing packages and dependencies.
2. sudo apt-get install nginx — install nginx.

Once that’s done, you should go to your IP address on the browser and see the default nginx home page such as below.

Nginx welcome screen

Finally, do not forget to configure nginx by editing Nginx configuration file at /etc/nginx/sites-available/default . Inside the file search for location / and replace that with:

location / {
   try_files $uri $uri/ /index.html =404;
}

This snippet above will ensure that all routes are redirected to index.html file which serves our single-page application.

Step 5 - Upload build directory

The next step is to go to var/www/html directory since this is what nginx is serving now. I recommend doing so via FTP. Once you are there, delete the existing index.nginx-debian.html file.

Then upload all the contents of build directory produced in Step 1 to var/www/html directory, as in the screenshot below.

Now if you open your website, you will be able to see the exchange setup! We kindly ask you to change the content and tracking scripts before doing so though 😊

Step 6 - Setup firewall

To get some extra security, let’s set up a firewall. Let’s just go through these steps:

1. sudo ufw default deny incoming
2. sudo ufw default allow outgoing
3. sudo ufw allow ssh
4. sudo ufw allow http
5. sudo ufw allow https
6. sudo ufw allow ftp
7. sudo ufw allow sftp

This is the most basic firewall setup that only enables SSH, HTTP, HTTPS, FTP and SFTP incoming connections. You could go more sophisticated by only allowing to SSH from a certain IP range or so on but that’s up to you.

Step 7 - Install SSL & enable HTTPS

Once you have everything setup, you will probably want to get your domain ready and HTTPS setup. For these I will not provide the instructions but you can check out great tutorial by Digital Ocean on how to set up custom. Once that’s done, you can in just a few lines of code install SSL certificate and enable HTTPS which is made possible by Certbot.

Summary

I hope that the steps in setting up your server to run n.exchange front-end client are clear. The basic gist is to produce the build directory and upload that to the server. Each time you do changes, you will have to rebuild the project i.e. npm run build and copy contents of the build directory into the server at var/www/html.

Let us know what you think and whether you had success setting up your exchange. Good luck!