Docker for Frontend Developers

Photo by chuttersnap on Unsplash

The what and why for Docker 🤔

Docker Architecture

Terminology 📖

“Hello, World!” Demo 🌎

➜ ~ 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.

Node.js Demo 📦

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

.get('', 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

React.js demo ⚛️

> 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

# expose port 3000
➜ ~ docker image build -t react:test .
➜ ~ docker image ls
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 👋

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