How to actually build your own website (pt.2 ) deployment

Note: This tutorial has a heavy reliance on terminal. It may seem daunting, but I believe anybody can follow along. If you are on windows, click on the links below, and they will have guided instructions for windows users too.

So, you finished pt.1 add link, or you were lazy and just cloned the Github. Now it’s time to deploy, and let the world know you have your own website!

We will be using:

  1. Docker
  2. Heroku-cli
  3. Heroku
  4. NodeJS

Step 1. Docker

About

Deployment used to be complicated; you had to ssh or ftp into a file server, move your files and hope that the server could recognize them, and it would work. Those days are (sort of) over thanks to Docker.

You can think of Docker as a lightweight virtual machine that can run anything you want, without affecting the outside environment.

Docker also allows you to be able to deploy very easily. Just like on your own computer, you can easily push it to your server and it will run there with little to no configuration.

Install

Install docker on your machine: https://docs.docker.com/install/#supported-platforms

Run it by running the application!

After it is installed, make sure it is running by going to terminal and typing in:

docker ps 

You should get back an empty table like:

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

If you get something else, Docker isn’t running (make sure it is), or it is installed improperly ¯\_(ツ)_/¯ look to Google for help first, and then comment below if you really stuck.

Using

Now that Docker is installed lets make our app run using Docker.

To do that we will need three files, Dockerfile, server.js, and a package.json

The server.js should go in the server folder, and the Dockerfile should go in the highest directory, outside the server directory.

The server.js file is for making a node server. This node server will be the actual server, taking in incoming requests, and giving the appropriate files as a result.

The Docker file will tell Docker what dependencies are needed, and what base OS it should be running on.

The package.json contains out any dependencies that Node needs to run properly.

Server.js

//kill it when I say kill it
process.on('SIGINT', function() {
process.exit();
});
//Doesnt die all the time
process.on('uncaughtException', function (err) {
console.log('Caught exception: ' + err);
});
"use strict";
var express = require('express'); //routing
var app = express();
var path = require('path');
var PORT=process.env.PORT || 8080;
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, 'public/index.html'));
});
//start this bitch up
var server = app.listen(PORT, function(){
console.log('Server listening on port');
});

This is the basic setup. Most of these are dependencies in order for the app to run properly.

The important function:

app.get('/', function(req, res){
res.sendFile(path.join(__dirname, 'public/index.html'));
});

This is what actually tells the app to display the index.html that we created earlier, on any route hence the “‘/’”.

Sweet. Lets get those dependencies in check.

Package.json

{
"name": "docker_web_app",
"version": "1.0.0",
"description": "Sample website",
"author": "Luc Olsthoorn",
"main": "server.js",
"scripts": {
"start": "node server/server.js"
},
"dependencies": {
"express": "^4.16.1",
"path": "0.12.7"
}
}

Since we only have two dependencies, our dependency list is super short.

Ok, lets get Docker up and running now

Docker

FROM node:8# Install app dependencies
COPY server/package.json ./
RUN npm install

Add server/ /server/
EXPOSE 8080
CMD [ "npm", "start" ]

This is super small, because we aren’t really doing much.

Pretty much we are copying over the package.json, installing everything inside of it, adding more files, and telling the container what to do once it builds.

Lets build it and run it!

Build and Run

Navigate in the terminal to your directory that houses the Docker file. An “ls” should print out something like this:

Dockerfile README.md server

Now, make sure Docker is running, and run:

docker build .

It will be stuck on this for a while, don’t worry and don’t quit!

Hopefully it will successfully build! Now lets run it!

docker run -p 8080:8080 0ec5dac627d7

You should replace “0ec5dac627d7" with whatever your build is named.

Navigate to http://localhost:8080/

We alive baby!

To exit out smash that ctrl +c (on Mac).

Step. 2 Heroku

About

You can deploy on a lot of different places, such as

Digital Ocean, AWS, Linode, Your own server,

But I have found that Heroku is best for free tier small scale servers!

Make an account

https://signup.heroku.com/

You will need to install https://devcenter.heroku.com/articles/heroku-cli

Try running in your terminal:

heroku login

Now log into the container:

heroku container:login

Navigate your working directory to the app.

Create a new Heroku app instance:

heroku create 

Lets push it:

heroku container:push web

Once thats done let’s release it to the world!

heroku container:release web

Go to https://dashboard.heroku.com/apps/

Click on your app

Click open app!

Wow we finally did it. If you get an error like:

Go back and view the logs to see what went wrong, and hopefully Google can help you. It still might be starting up, but the logs will tell you.

Step. 3 Domain name

How will people know it’s your website if your url is ugly like: https://lit-river-71545.herokuapp.com/

Lets become more professional and have a web name like: www.lucolsthoorn.com.

There are many place you can go to buy domains, but I really enjoy Google Domains, because it’s cheap, reliable, simple, and you can do email forwarding for free (ex. me@lucolsthoorn.com).

Go to Google Domains and purchase your domain name.

On your Heroku app, navigate to settings, and enter in new dns information:

Now run this in your terminal:

heroku domains:add www.lucolsthoorn.com
  1. In Google Domains, click configure DNS tab
  2. Under Custom resource records, create a CNAME record for www and enter www.(name_of_your_herokusite).herokuapp.com. in the data field then click Add.

3. Under Synthetic records, use Subdomain forwarding to redirect @ or your domain name to www, then click Add.

4. Go to your url

It might not show up for a day or two, because it takes a while for the DNS servers to propagate your name change.

Congratulations. You have successfully built an awesome personal website! Share it with your friends, and share it with me!

Software Engineer - Full stack