Dockerizing my Node.js Selfie App in 30 minutes

Li-Ting Liao
Sep 1, 2020 · 6 min read

This is a showcase how I will package my previous Selfie App in a docker. Come check it out: https://hub.docker.com/r/ting11222001/selfieapp

Love it so much! My favorite animal has always been whales!

Goal

Here I’m going to showcase how I setup my docker environment, from installing docker desktop, generating Dockerfile, and docker images and containers in the following content.

I found most of concepts behind the packaging process and CLI are somewhat similar to Git :D Hope you will enjoy this piece of demo, and use it in your own project if you haven’t tried it out yet!

A few terms before I move forward

I will mention below terms a lot, and here is the way how I will explain them:

  • Dockerfile: a blueprint of building docker image
  • Docker image: a template of running docker container
  • Docker container: is a running process e.g. here I have a node app to run

I can define the docker environment in Dockerfile. Other developers can use the same Dockerfile to rebuild the environment, which is saved as an immutable snapshot known as Docker image. Images can be uploaded to the cloud. Other developers who want to run the software can just pull down the image to create a container i.e. a running process of that image, so that image can be run in multiple times and in multiple places.

What I’m doing here is that putting node in a docker is to reproduce my environment and when other people pull the docker image, it’ll be like running the app in “my environment” for them.

Process

I chose to install stable version (which requires at least 4G of RAM, and Catalina Macbook 10.15+):

The reason why I’m using docker desktop is to help myself to have a GUI to easily visualize which container is running and even reading the logs inside the GUI. I can do all of these things in CLI as well.

docker desktop GUI dashboard looks like this:

Click on a container, I can see logs from history:

Once installed, I can start using below CLI to give myself a list of running containers on my system. Every container has a unique ID and an image. Same info will be in the desktop GUI as well.

$docker ps

Since my Node.js app was created in VS code this IDE, I also want to install Docker extension in VS Code:

Now, I’m going to start configuring a Dockerfile on my selfie app.

Create a Dockerfile in the root and configure with below. Since I’m packaging a Node app, so here I used node:12 image as the environment of my app:

The last line is to tell docker to copy all my local files to its working directory, but I don’t need to package the entire dependencies from node_modules here. So I will add .dockerignore like .gitignore i.e. to skip these files from dockerized:

Also I need to set a port with ENV, EXPOSE, and let the container know how to run this application with CMD:

Back in my Express in index.js, I double checked with my port:

Also, we need to signup an account on docker hub, so when we build a container image, we can give it a better name tag later on.

After we sign in, we can create a new repository for this project. Mine looks like this:

Next, build our app’s docker image by using $docker build and giving it a <repo name>:<tag>. Make sure you’re in the directory of your project in a terminal using the cd command. Run the following command to build your container image:

$docker build --tag <repo name>:<tag> . 
#remember the dot at the end!

In the end of this command’s response, you will see:

Successfully built fd5049e9c2fd

It’s telling us an image is built with this ID.

Then, try to run container — make sure there’s port forwarding from port 8080 to port 5000:

$docker run -p 5000:8080 fd5049e9c2fd

Once it’s up and running, we can see this container showing green signal on GUI dashboard and we can directly hit the top right OPEN IN BROWSER button to see how our app looks in the browser:

It’s running as I expected:

Main page
Past records page

Now we’re ready to share our container image on docker hub. Use below code to connect our image to remote docker hub repo:

$docker tag local-image:tagname new-repo:tagname
$docker push new-repo:tagname

Make sure images name should be specified as <Your Docker ID>/<Repository Name>:<tag> like below:

$docker tag selfieapp:1.0 ting11222001/selfieapp:1.0
$docker push ting11222001/selfieapp:1.0

When it’s all up, we can come to our personal dashboard of this repo to check it out. Look there’s one tag shown up:

When we click on the tag, we can see the same sha256 on top, so this is the exact container image we just uploaded:

Conclusion

That’s it for today! Hope this helps.

Have a wonderful day ahead!

Li-Ting Liao

Check more articles from me here: https://medium.com/li-ting-liao-tiffany

Li-Ting Liao

Written by

Hi there, are you also interested in building side projects? Check out my blog and let’s build together! https://medium.com/li-ting-liao-tiffany

Li-Ting Liao

I love to write about what learned about programming, data and building simple projects.

Li-Ting Liao

Written by

Hi there, are you also interested in building side projects? Check out my blog and let’s build together! https://medium.com/li-ting-liao-tiffany

Li-Ting Liao

I love to write about what learned about programming, data and building simple projects.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store