Wilson Mendes


Google Developer Expert Web Technologies

Docker for

Frontend Developers

So, let's start?

What is



Loads only what we need

Phoenix environment approach


the game!




git clone

git checkout step-1

cd home-page

# Building the image
docker build -t micro-frontend-home-page .

# Running the container with the app
docker run -d \
  --name home-page \ 
  -p 8888:5000 \

# Access the docker container
docker exec -it home-page sh
# Checking docker images
docker images -a | grep micro-frontend-home-page

# Checking docker containers
docker ps -a
# Decreasing the docker size
# Removing `yarn cache`

# Add this in your `home-page/Dockerfile`

FROM node:8.1.4-alpine



COPY package.json .
COPY yarn.lock .

RUN yarn install -s --no-progress && \
    yarn cache clean

COPY . .

CMD ["node", "index.js"]

What is

Docker-compose ?

reverse proxy

stack #1

stack #2


Next steps

Because the improvement never ends!

# Go to the root folder of `micro-frontend-pages`
# Repository

docker-compose up --build

# After that, access http://localhost:8888 and 🎉
# Installing autocannon globally
# And check memory and CPU consuming by container

npm install -g autocannon

# In one tab run this command
# to check memory and CPU information by container

docker stats

# In another tab run this command
# To simulate concurrent access
# Like users in your website ;)

autocannon -c 100 \
  -d 12 \
  -p 10 \

Build images

Run containers
Execute commands
Diagnose issues

Are you ready?

Thank you

Wilson Mendes


Google Developer Expert Web technologies

Docker for Devs

By willmendesneto

Docker for Devs

Let's share some content about Docker? :)

  • 1,913
Loading comments...

More from willmendesneto