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.
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
.
Once you do that, you will see that build
directory 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.
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.
Below you can see the droplet settings that were used.
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.
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!
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:
sudo apt-get update
— update existing packages and dependencies.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.
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:
sudo ufw default deny incoming
sudo ufw default allow outgoing
sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https
sudo ufw allow ftp
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!