DEV Community

Docker For Frontend Developers

Aks on May 02, 2019

This is short and simple guide of docker, useful for frontend developers. Why should you use docker? Long long back when business nee...

Read full post

derek • May 2 '19 • Edited

Oh, also you can get more bang for your buck...

if you use

FROM node:8-alpine

FROM gcr.io/distroless/nodejs

Becasue... Size matters 😜, and so does security 🔒

Image	Size
node:8	681MB
gcr.io/distroless/nodejs	76MB
node:8-alpine	69.7MB

Aks • May 3 '19

You are right Derek, slimming your images is important, but then i think that is an vast agenda having your multistage bulids, and trimming your code among other things :)

derek • May 3 '19

Indeed. But hypothetically if you could only do one thing, utilizing alpine or distroless is a low hanging fruit with a huge ROI.

Because, even if you do a multistage build without it you won't trim too much in comparison.

Image	Size
node:8	681MB
node:8 with multi stage build	678MB

👆🏽is a basic Hello World express app

SHARAD SHINDE • May 3 '19

Docker Slim: Hold my beer 😅

Take a look at docker-slim - dockersl.im/

derek • May 3 '19

🍺held! Very cool

Confirmed! They've successfully implemented the middle-out compression 😆

slidenerd • May 13 '22

does it have node-gyp?

Vishnu Haridas • May 4 '19 • Edited

Earlier when I started on Docker tutorials online, I couldn't understand how different OSs make it possible to run an isolated environment without having a VM.

Later only I understood that Docker is designed for Linux and uses a kernel-level isolation feature that is built into the Linux OS. And when installing Docker in Windows or Mac, they are running Docker inside a Linux OS that is running on a VM inside that Windows/Mac computer.

I really like every Docker tutorial to include the line clearly saying that "A Container is all about filesystem/resources isolation, which is a system-level feature built-into Linux, and Docker is a tool that abstracts this feature."

Juan Ramos • May 9 '19

So, if we want to use Docker in Windows or Mac, we will end up using VM technology at the end of the day. Is that correct?

Vishnu Haridas • May 9 '19 • Edited

Correct. From Wikipedia: "Docker on macOS uses a Linux virtual machine to run the containers. It is also possible to run those on Windows using Hyper-V or docker-machine."

Windows has two types of containers — Windows Server Containers and Hyper-V Isolation — in which Hyper-V is a VM. More details are here - docs.microsoft.com/en-us/virtualiz...

I understand that production servers are running on Linux machines.

Note: Microsoft will soon start shipping a full Linux kernel within Windows. This may change how Docker runs in Windows computers. Let's wait and see.

Dimitrios Lytras • May 3 '19

Why copy package.json separately?

Raimbek • May 3 '19 • Edited

I'll try answer with my bad english :)

It's very good question. Docker creates layers for each command COPY/ADD (and some others, you need to read documentation). In build time docker will see to the changes, if in some layer will detected change all below layers will be rebuild.

For example, assume we have like this Dockerfile:

 WORKDIR /app  
 COPY . /app  
 RUN npm install

And we will change source code very frequently, then docker will execute npm install for each change. It's very bad and not efficient. Because for each little change you will reinstall whole nodejs packages (and if you not using volume or cache it will take loooong time).

In this case:

 WORKDIR /app  
 COPY package.json /app
 RUN npm install
 COPY . /app

we will execute npm install only when package.json changes (some package added or removed so on).

Dimitrios Lytras • May 3 '19

Thank you for the detailed response! Your English are perfect btw.

Aks • May 6 '19

right on :)

Gautam Krishna R • May 6 '19

Great explanation. I too had the same question.

anantvir • Sep 12 '22

The best explanation so far. Much better than 99% of the youtubers/tutorials online ! Thanks Raimbek ! This is awesome

SomangIm • Aug 27 '22

Thank you! i was looking for this answer too

David Dennis • Nov 24 '20 • Edited

This is used to download the node package/dependencies your application needs.
With the help of adding node_modules folder to your DockerIgnore file, you only need to use the package.json file which gives a clear description of all the packages your node app needs inorder to run.

Vincent Schoener • May 3 '19

Still the same article without a proper solution to work with IDE feature as autocomplete.

node_modules is installed in the container and you also need to install it locally and try to not mess with it when you mount your source if you want to have the best of the 2 worlds. (Currently working on it and writing an article describing the need and the issue all developer met).

Otherwise, nice article :)

Anton Kosyakov • May 4 '19

You should check out Gitpod. It builds your image together with the project within it, deploys it in the cloud and provides VS Code like browser IDE with autocomplete and so on. Also VS Code releases remote extensions which are deployed in containers. Although i'm not sure how they get files from host to container os, if they mount them then you will get the same issues.

Dan • May 3 '19

If I understand you right, VS Code just implemented an extension so you can use vs code in the container environment. It needs the insiders build. They just announced this yesterday.

Aks • May 7 '19

In order to solve this problem, just develop locally on your container no?

Vincent Schoener • May 7 '19

That's not possible, how can I use an IDE that way and be productive? Using Vim or other text editor is not the solution at all :)

Dan • May 3 '19

Thank you very much for this write up! It's very easy to understand and I have been curious about docker because I see the term often.

In your example you have set up a node server. As of right now I don't need to do that because I'm focused on front end things. Do you see any reason to use docker for front end development? (I.e. simple webpages that don't require backend services)

Also, one thing that is unclear to me about docker containers is, where are the files (for example if I make hello.txt in the container? Are those files in the docker file folder? Can I access them if I'm not using the docker container? In a docker container if I run cd ~, where does that take me? Virtual or real home?

Aks • May 3 '19

Hey Dan,

Thank you for your feedback :)

While dockers are not a necessity to develop frontend, it is advisable to do so. For example there are simple webpages, you need a server which serves it to consumers, that entire setup should be dockerized (in my opinion) so that other devs do not have to put effort in setting up their local server. It just makes development easier. Also, next part is deployment
While the config for that is little more complex, but in simple terms docker would allow you to scale it as and when needed based on traffic.

For your second question, for example you have my-app folder, then your folder structure is going to be like this:

Then your docker file your can write

# Dockerfile  
    FROM some image that you want
    COPY hello.txt  <to wherever you want your file in docker container, can be a folder or not>
    EXPOSE 8081

Also for your last question , Inside container, paths that you navigate, they point to virtual paths inside container.

Dan • May 3 '19

Wow thank you! I understand now about the COPY part in the docker file. I had to go back up and re-read your explanation. Makes sense now.

I'm certainly interested in trying these things out - but at the moment I think it will introduce a great many other things that I need to learn and I think I will wait for a bit. But your post certainly helped clear some things up in my head about what docker containers are all about.

So please correct me if I'm wrong, but I'm curious about the following:

locally you have a container set up for development. You have this docker file and etc.
locally anyone on your team can then easily set up the same environment because they can use the same docker file
server side you also have the same docker file but that container is constantly running to serve a website or whatever

I assume that you would also use version control for all of this, including the docker file. I also assume that the container running on the server has some kind of way to update files from version control when a commit is done on a certain branch. (I know that hooks exist for this sort of thing with GitHub but I don't have experience with this yet.)

If you have the time, I'd be interested to read more about this sort of stuff in another dev.to post. Diagrams are helpful for sure! There's a lot of moving parts for all of this technology and it's a challenge to see how things fit together.

Aks • May 6 '19 • Edited

Hey Dan,

Yes using dockerfile, you can build and share your image. There is a version control for docker images, hub.docker.com/, here you can store and share your images.

I did not understand your last question, could you please elaborate?

Wilson Tovar • May 2 '19

Thaaaaaaaaaank you! I was loking for a tutorial like this. <3

Vijay Koushik, S. 👨🏽‍💻 • May 2 '19

Thanks for the post 👍🏽. Not only I learnt what docker is, I also learnt how to use docker in node.js 🙂

Lenmor Ld • Jan 4 '20

I do more frontend at work, and I just needed a quick intro to the concepts so I can grasp what the DevOps guys are talking about. 😅
Didn't want to sit through a 2-hour tutorial, so this is exactly what I needed.
Thanks for this short-and-sweet demo!

Leslie • May 2 '19

This is awesome, absolutely love this platform because of such information, I'm going to complicate things about and try with ASP.NET

Joe Zack • May 2 '19

Microsoft has really nice base images that will do this, it's a bit tricky because the sdk you need to compile is separate from the runtime you need to run it so they do a 2 pass build.

It's not bad, but I would definitely start with their examples: docs.microsoft.com/en-us/aspnet/co...

Leslie • May 2 '19

Thank you, be blessed 🙏

mithiridi23 • May 4 '19

Very nice article

biju ramachandran • May 4 '19

Hello Akanksha:

Great tutorial - now I have a better understanding of docker. But when I run the following command, I get - > /bin/sh: 1: mode: not found.?

ubuntu@ubuntu-VirtualBox:~/my-node-app$ sudo docker container run -p 4000:8081 hello-world
/bin/sh: 1: mode: not found

Thanks and much appreciated.
/Biju

Aks • May 6 '19

Hi Biju,

It is hard to say what should be causing this error. Maybe you need to source /bin/sh. I maybe wrong. Do not have a lot of experience in ubuntu. Sorry :(

JoelBonetR 🥇 • May 5 '20

Nice post!

Here my little contribution for front-end project with docker and bundler (also valid with few mods to help on backend/ full stack projects).

dev.to/joelbonetr/simplifying-dock...

Hope it helps :)

Jang Rush • Oct 15 '19

Hi, I'd like to translate this excellent tutorial to Chinese. The translated text will be published at nextfe.com
Can you give me the permission?

Aks • Oct 15 '19

Yes sure, send me the link when it is published :)

Jang Rush • Oct 18 '19

Just finished translation: nextfe.com/docker-for-frontend-dev...

During translation, I noticed some possible typos:

It is a running instance of docker image. there can be many containers running from same docker image.

t -> T

containerise very node.js simple app

a very simple node.js app

Buntu Ngcebetsha • May 4 '19

Wonderful introduction, thank you

dat le tien • May 3 '19

Thanks for explain each line by line of Dockerfile.

javinpaul • May 4 '19

The first few paragraphs are wonderful, you have a knack of explaining things in simple language, keep it up. +1 from my side.

Aarush Bhat • May 15 '20 • Edited

Is it actually effective? I just started with docker, but it just slows down my deving? Nice explaination btw :')

SouariKarim • Mar 3 '22

Thank you for the explanation ! But i think you should change the title to "Docker for backend developers" , FrontEnd ones have nothing to do with express servers !