Docker for Frontend Developers

Image for post
Image for post
Photo by chuttersnap on Unsplash

The what and why for Docker 🤔

Let’s take a look at a simple definition of what is Docker:

Image for post
Image for post
Docker Architecture

Terminology 📖

In the Docker ecosystem, there are a few key definitions you’ll need to know to understand what the heck they are talking about:

  • Containers: These are defined by the image and any additional configuration options provided on starting the container, including but not limited to the network connections and storage options.
  • Docker daemon: The background service running on the host that manages the building, running, and distribution of Docker containers. The daemon is the process that runs in the OS the clients talk to.
  • Docker client: The CLI that allows users to interact with the Docker daemon. It can also be in other forms of clients, too, such as those providing a UI interface.
  • Docker Hub: A registry of images. You can think of the registry as a directory of all available Docker images. If required, you can host your own Docker registries and pull images from there.

“Hello, World!” Demo 🌎

To fully understand the aforementioned terminologies, let’s set up Docker and run an example.

➜ ~ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1b930d010525: Pull complete
Digest: sha256:6540fc08ee6e6b7b63468dc3317e3303aae178cb8a45ed3123180328bcc1d20f
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.
  1. When you run docker run [name-of-image], the Docker daemon will first check if you have a local copy of that image on your computer. Otherwise, it will pull the image from Docker Hub. In this case, the name of the image is hello-world.
  2. Once you have a local copy of the image, the Docker daemon will create a container from it, which will produce the message Hello from Docker!
  3. The Docker daemon then streams the output to the Docker client and sends it to your terminal.

Node.js Demo 📦

The “Hello, World!” demo was quick and easy, but the truth is we were not using all Docker’s capabilities. Let’s do something more interesting. Let’s run a Docker container using Node.js.

Image for post
Image for post
Official Node Images
➜ ~ docker pull node
const https = require('https');

https
.get('https://jsonplaceholder.typicode.com/todos/1', response => {
let todo = '';

response.on('data', chunk => {
todo += chunk;
});

response.on('end', () => {
console.log(`The title is "${JSON.parse(todo).title}"`);
});
})
.on('error', error => {
console.error('Error: ' + error.message);
});
➜ ~ docker run -it --rm --name my-running-script -v "$PWD":/usr/src/app -w /usr/src/app node node node-test.js
  • --rm automatically removes the container after finishing its execution.
  • --name [name] provides a name to the process running in the Docker daemon.
  • -v [local-path: docker-path] mounts a local directory into Docker, which allows exchanging information or access to the file system of the current system. This is one of my favorite features of Docker!
  • -w [docker-path] sets the working directory (start route). By default, this is /.
  • node is the name of the image to run. It always comes after all the docker run flags.
  • node node-test.js are instructions for the container. These always come after the name of the image.

React.js demo ⚛️

Since this post is focused on front-end developers, let’s run a React application in Docker!

> npx create-react-app react-test
> cd react-test
> yarn start
# Select the image to use
FROM node

## Install dependencies in the root of the Container
COPY package.json yarn.lock ./
ENV NODE_PATH=/node_modules
ENV PATH=$PATH:/node_modules/.bin
RUN yarn

# Add project files to /app route in Container
ADD . /app

# Set working dir to /app
WORKDIR /app

# expose port 3000
EXPOSE 3000
➜ ~ docker image build -t react:test .
➜ ~ docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
react test b530cde7aba1 50 minutes ago 1.18GB
hello-world latest fce289e99eb9 7 months ago 1.84kB
➜ ~ docker run -it -p 3000:3000 react:test /bin/bash
➜ ~ docker run -it -p 3000:3000 -v $(pwd):/app react:test /bin/bash

root@55825a2fb9f1:/app# yarn build

Conclusion 👋

This has been an amazing journey into the fundamentals of how Docker works. For more advanced concepts, or to cement your understanding of the discussed concepts in this article, I advise you to check out the references linked below.

References 🤓

Software Engineer during the day, cook at night 👨‍🍳 Traveller and Foodie 🧳 Whenever I can I like to write and speak 🤓 Berlin 📍

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