Pro Yearly is on sale from $80 to $50! »

Docker for Vue.js Developers

Docker for Vue.js Developers

This was a talk given by me at the online VueBLR meetup on 23rd May, 2020.

Docker is a wonderful new technology that's creating shifts in the way we build and deploy applications. Static websites are no exception. We explore how Docker can help us front-end developers, not only to iterate faster by creating images that contain our application and the necessary deployment server, but also, avoiding the "it works on my machine" model of development by ensuring repeatable development environments for all the members in a team. All this, without having to sacrifice the great affordances we enjoy such as hot-reloading.


Sangeeth Sudheer

May 23, 2020


  1. DOCKER FOR VUE.JS DEVELOPERS Sangeeth Sudheer @sangeeth96

  2. HI, I’M SANGEETH. Front-end @ Flock. Gamer. Otaku. Geek. Hardcore

  3. So, what is Docker and… WHY SHOULD I CARE?

  4. None
  5. None
  6. None
  7. Cool… but what is it? • Think of it like

    a bundle containing your application code as well as just the right amount system APIs and services—not the whole Operating System.
  8. Advantages • Lightweight • Less system resources required • Faster

    deployment cycle since it’s way easier to swap out old container image with a new one • Can be run using an orchestrator such as Kubernetes to rapidly scale up, run multiple containers at the same time and quickly failover
  9. None
  10. None
  11. No thanks, I’ll use Netlify. • Netlify is awesome! •

    What makes it even more awesome… is that it uses containers under-the-hood!
  12. So… when do you use it? • You can’t use

    cool stuff like Netlify. • You need flexibility. • You need on-premises deployment. • Containers will make your lives a whole lot easier if the above points fit. • But the most exciting bit is: you can use it for development!
  13. Okay, okay… HOW DO I GET STARTED?

  14. We’ll split the use of Docker for two purposes (and

  15. Ingredients • Docker Desktop installed on your machine (https://

    • Dockerfile • .dockerignore (optional) • A cloud-provider that can run containers (pretty much everyone does!). We’ll use Heroku.
  16. None

  18. Dockerfile FROM node:12.16.0 The base image from which you’re going

    to build. WORKDIR /app Set the working directory. Commands like COPY will then respect this setting. COPY <from> <to> Copy files from <from> into the image in the location provided by <to>.
  19. Dockerfile RUN yarn install Run any arbitrary command. This result

    in the creation of a new layer. CMD [“yarn”, “start”] This sets the default command that should be invoked when the container is started.
  20. Docker image name/tag format: MY-APP:1.0.0 MY-APP:1.0.0-OSNAME MY-APP:LATEST

  21. Port mapping: -p HOST_PORT:CONTAINER_PORT

  22. Let’s take a look at some DOCKER CLI CRUD

  23. docker container ls [#--all] Shows all the running container instances

    in your machine. Pass --all to see even the containers that are stopped. docker image ls Shows all the docker images you have on your machine. docker top <container-name> Shows all the running processes inside a container.
  24. docker run [-it] <image-name> Creates an instance of a container

    from the image name provided. The image has to exist for this command to work. docker build -t <image-name> . Builds a docker image based on the Dockerfile in the current directory. docker exec [-it] <container-name> <command> <args> Runs the given command inside given container instance that’s running at the moment.
  25. docker stop <container-name> Gracefully stops the running container. There’s a

    start command to run a stopped container as well. docker kill <container-name> Tries to gracefully stop and if it doesn’t work, forcefully kills and removes the container instance.
  26. docker container rm <container-name> Removes the stopped container instance. docker

    image rm <image-name> Removes the image from your machine. docker image prune docker container prune Removes all unused images. Removes all stopped container instances. If you’re running low on space, these are your friends.
  27. Some tips • Always include a .dockerignore file and add

    directories like .git and node_modules in it. • Make sure you install your dependencies first and in the end, copy over your application files in order to get best caching. • Don’t include any script to restart the application if it files. i.e, don’t use tools like nodemon/pm2 inside Docker since your orchestration engine takes care of that for you anyway. • Use lightweight images like alpine for production. You can use multi-stage docker builds to achieve this.
  28. I’m pumped! Guide me! • Stephen Grider’s excellent Udemy course

    is a must watch the-complete-guide/ • Katacoda • Docker docs • Read about docker-compose • Vue.js Cookbook
  29. None
  30. THANK YOU! Sangeeth Sudheer @sangeeth96 QUESTIONS?