Releasing our MVP

This week is an important milestone: we are going to push our MVP into production and make it available to everyone.

This article will explain how to get a domain (plannipoker.com in this case), get a server (to host our app), and configure everything until www.plannipoker.com is live (it is now, you can try!).

Buying a Domain

You can get a domain through a lot of providers, and the one you chose will usually depends on the country you live in. The most famous ones are GoDaddy.com, NameCheap.com etc., but I’m today going to use the UK provider FastHosts.co.uk just because I’ve been using them for years.

First, you need to register (which we won’t cover here), and then chose a domain:

Finding a domain is not trivial, especially a .com one, as most good names are already taken. Don’t bother trying anything that’s in the dictionary, you’ll have to use your imagination.

Ideally, a good domain name would be available in most domain extensions (.com, .co.uk, .fr etc.) so you can buy these later (or now to be safe!) if your new mega-corporation is planning on taking over the world.

As you can see below, “plannipoker” is available everywhere, which makes it a good domain name.

Once we get our server, we’ll go back here to configure our domain to point to the IP of our server.

Buying a server

Again, you have lots of options for this. The most popular ones are Amazon AWS and Digital Oceans, but at the end of the day, you will be purchasing a server, choosing an OS to install on it (we’ll go with Ubuntu), and you’ll configure it.

For Plannipoker, we are going to use a smaller European player, called Scaleway, because their dedicated servers are easy to launch and very cheap (2 euros a month).

We create an account there, then land on the dashboard:

Click on “Create Server”, choose the type of server you need (we are going for the cheapest one for now).

Then choose a distribution (the Linux flavour) that you want to install on your machine: We are going with Ubuntu here:

And a few minutes later, your server will be ready:

Before being able to connect to it though, you will need to give Scaleway your public SSH key: from the dashboard, go to Credentials:

Then, on your terminal, copy your SSH public key:

And back to Scaleway, paste your key:

This will ensure that you can connect to your server via SSH, without any password.

Adding a DNS record

Right now, our domain (plannipoker.com) has no idea where the server is. We’ll need to configure it to specifically tell him that www.plannipoker.com should point to 51.15.244.70.

To do that, go back to Fasthosts.co.uk (or whatever your domain registrar is), and create a new A Record:

You will need to create two of those, one for “www”, one for nothing (leave it blank) so both www.plannipoker.com and plannipoker.com redirect to our server.

Configuring our server

Speaking of which, open your terminal and SSH in to your server:

You’ll of course need to replace the IP by your server’s IP.

If you know Linux a bit, you’ll probably notice that we connected as root here, our server doesn’t have a non-root user yet. Let’s fix that, as doing everything as root is dangerous and bad practice.

Create user

Creating a user can be done in a few commands: (don’t type any line that starts with a #, they are comments)

# We add the new user "antoine"
adduser antoine
# We add this new user into the sudo group, so the user can
# perform sudo commands (super user commands)
usermod -aG sudo antoine
# We then switch to our new user to try it
su - antoine
# We perform a sudo command with our new user to ensure
# that it works
sudo ls -la /root

Add keys

Our new user doesn’t know about our SSH key, so we’ll need to add it:

mkdir .ssh
cd ./.ssh
vim authorized_keys

Once you are in the VIM editor, press “I” to go into insert mode, paste your SSH key (the same we pasted on the Scaleway interface before), then press “Esc” to go into command mode, and then “:wq” to write the change and quit.

Once you’ve left VIM, type the command “exit” which will bring you back to your root session, then “exit” again to go back to your local terminal.

Reconnect to your server now, using your new user

ssh antoine@11.22.33.44

We now have to install a few software:

• Nginx: this is our web server, similar to IIS or Apache
• Git: you know this one, we’ll use it to fetch our code
• Yarn: you should also know this one, we’ll use it to fetch our dependencies
• NVM: this one will be used to install and manage Node
• PM2: this one will help us with running our backend program, and keep it alive

First, let’s install Nginx and Git:

sudo apt update
sudo apt install nginx git

Then, we are going to create a directory for our code:

cd /var/www
sudo mkdir plannipoker
chown antoine:antoine ./plannipoker

Notice how we changed the user permissions (using chown) on this directory to be our new user, (“antoine” in this case): this will make it easier to checkout the code and modify some files if necessary, without having to use sudo.

At this point, you should be in “/var/www”, and you can clone the code into the plannipoker directory:

git clone https://github.com/antoinejaussoin/plannipoker.git

Installing Yarn

Installing Yarn is slightly more involved: please copy-paste these, as Yarn is not available directly in APT:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

If you get an error while installing Yarn about apt-transport-https:

sudo apt-get install apt-transport-https

and then try again

Install NVM

NVM is the best tool to manage Node versions.

Run the following command:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Once it’s over, run the following so you can use NVM without having to close your SSH session and start a new one:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

And then finally, install the latest version of Node v8:

nvm install 8

We are almost there!

Run Yarn

Let’s run Yarn to install our dependencies:

cd /var/www/plannipoker
yarn

Then build our project (both client side and server side);

yarn build

Install and run PM2

As mentioned before, PM2 will help us run our backend program and ensure it stays alive (by restarting it automatically if it crashes for instance).

To install, do:

npm i -g pm2

Then, go to our backend (server) built program and start it with PM2:

cd /var/www/plannipoker/server/dist/server
pm2 start index.js

You should get something like that:

Configuring Nginx

We now need to serve our static files (our React app, in Javascript), and redirect any API calls to our backend. For that, we will be using Nginx.

Nginx works with a configuration file, that you need to put into /etc/nginx/sites-available. This configuration file won’t be picked up by Nginx until you create a symlink to it to /etc/nginx/site-enabled.

This allows you to disable one of them easily by removing the symlink.

cd /etc/nginx/sites-available
sudo vim plannipoker

Then go into insert mode by pressing “I”, and paste the following configuration:

I’m not going to go into details on how this works (as it would be probably worth an entire book), but this should be enough to give you an idea of how to replicate the same thing for your own project.

Once you’ve configured Nginx, create the symlink I was talking about:

sudo ln -s /etc/nginx/sites-available/plannipoker /etc/nginx/sites-enabled/plannipoker

And then, reload Nginx so it picks up this new configuration:

sudo nginx -s reload

At this point, if you open your domain’s URL in a browser, you should get your app up and running!