1. Setting up the Docker Application.
  2. Layerfile
  3. Setting up the Layerfile
  4. Adding the Layerfile
  5. Video Tutorial
  6. Project Source Code

​
Setting up the Docker Application

(You can skip this section if you already have an app with Docker running.) For this example we’ll build an Express JS application that runs through Docker. To build your Express application through Docker, ensure you have node, npm, and Docker installed on your computer. You can verify if node, npm, and Docker are installed by running the following commands in your terminal:
  • node --version
  • npm --version
  • docker
If installed correctly these commands will all give you an output in the terminal. If node and npm are installed, create a new directory with mkdir [app_name] - replacing [app_name] with the name of your application. Next navigate into the directory with cd [app_name] and run the following commands:
  1. npm init
  2. npm install express
After installing express, create a new file called app.js at the root of the folder and use the following to set up an endpoint for your application:
app.js
const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello World");
});

app.get("/test", (req, res) => {
  res.send("Test Route!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});
After creating your app.js file, create another file called Dockerfile in the root of your folder, and add the following contents:
Dockerfile
FROM node:12-alpine 
RUN apk add --no-cache python2 g++ make 
WORKDIR /app 
COPY . . 
RUN npm install --production 
CMD ["node", "app.js"] 
EXPOSE 80
Once your dockerfile is created, you can use the following commands to run your Docker app:
  1. docker build -t image .
  2. docker run -d -p 80:80 image

​
Summary of Steps:

  1. node --version
  2. npm --version
  3. mkdir [app_name]
  4. cd [app_name]
  5. Create your app.js file with the content above
  6. Create your Dockerfile file with the content above
  7. docker build -t image .
  8. docker run -d -p 80:80 image

​
Layerfile

Listed below is an example Layerfile for webapp.io which you can use to setup a basic Express application deployed with Docker. We’ll breakdown this Layerfile in the section below for a set of detailed explanation on what each one of the instructions do.
Layerfile
FROM vm/ubuntu:18.04

# install the latest version of Docker, as in the official Docker installation tutorial.
RUN apt-get update && \
    apt-get install ca-certificates curl gnupg lsb-release && \
    sudo mkdir -p /etc/apt/keyrings && \
    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg && \
    echo \
    "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" |\
    sudo tee /etc/apt/sources.list.d/docker.list > /dev/null && \
    apt-get update && \
    apt-get install docker-ce docker-ce-cli containerd.io

COPY . .

RUN docker build -t image .
RUN docker run -d -p 80:80 image

EXPOSE WEBSITE http://localhost:80

​
Setting up the Layerfile

If you haven’t already, please sign up to webapp.io, and install webapp.io onto your repository. Let’s breakdown each instruction in our Layerfile.

​
1: Set the Image

FROM vm/ubuntu:18.04 The FROM instruction tells webapp.io what base to use to run tests from. There can only be one FROM line, and in this case we’re using the ubuntu:18.04 virtual machine image. If you’re familiar with AWS Ec2 Instances, this is similar to creating a virtual machine from the ubuntu 18.04 image.

​
2. Install Docker

# install the latest version of Docker, as in the official Docker installation tutorial.
RUN apt-get update && \
    apt-get install ca-certificates curl gnupg lsb-release && \
    sudo mkdir -p /etc/apt/keyrings && \
    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg && \
    echo \
    "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" |\
    sudo tee /etc/apt/sources.list.d/docker.list > /dev/null && \
    apt-get update && \
    apt-get install docker-ce docker-ce-cli containerd.io
The RUN instruction will run the given script, and fails the Layerfile if the script fails. In this case, we’re using the RUN command to install the dependencies we need to build and run the Express application in Docker. In this case we’re using the RUN instruction to download Docker.

​
3. Get Repository Files

COPY . . The COPY instruction moves files from your repository to the virtual machine. The Layerfile will pick up on the files in the repository that you are making the commit for, and will copy those files into the virtual machine so you can run you project.

​
4. Build the Docker image

RUN docker build -t image . Similar to the RUN commands above, this will execute the given script docker build -t image ., which will install build the Docker image for the Express app.

​
5. Run the Docker image

RUN docker run -d -p 80:80 image Similar to the RUN commands above, this will execute the given script docker run -d -p 80:80 image, which will run the Docker image that was previously built.

​
6. Expose Docker Port on the Virtual Machine

EXPOSE WEBSITE http://localhost:80 The EXPOSE WEBSITE instruction creates a link to view the virtual machine at a specific port. We use EXPOSE WEBSITE to expose the virtual machine on port 80 which is where the Express application runs after running ng serve. We use EXPOSE WEBSITE here so we can get a link to our Express app to share with stakeholders involved in our projects.

​
Adding the Layerfile

The last step in this process is to add the Layerfile to your repository. Simply create a file called Layerfile (no file extension) in the root of your Express application. If you haven’t already, install webapp.io onto your repository containing your Express app. Once done, simply create a commit and push your Express app to the repository with the new Layerfile. Webapp.io will pick up on the Layerfile and build your Express application according to the steps in your Layerfile.

​
Video Tutorial

Check out our Docker video tutorial before for a step-by-step breakdown on how to set up webapp.io with preview environments for an Express application: View Project Source Code