Skip to content
loading...

Frontend Development with Docker simplified

Gábor Soós on January 16, 2020

Docker is a great tool that helps developers build, deploy, and run applications more efficiently in a standardized way. For frontend applications,... [Read Full]
markdown guide
 

So im having trouble getting mine to work. I just created a plain index.js with console.log('hello world'), my startup script says nodemon index.js which successfully runs the index file and monitors for changes. But when I change the index.js in VSCode it never updates in the container. It just says "watching for changes before restart". This works locally BTW, if I change the index running without docker, it detects the change and updates. Is something wrong with my volumes? I set COMPOSE_CONVERT_WINDOWS_PATHS=1

 

I've tested the setup again with Vue CLI and it detects changes. Next week I'll be working on the Node.js workflow.

 
 

Sorry it took so long for me to get back to you, here is the repo github.com/VictorioBerra/docker-co...

You should just have to clone and run docker-compose up and then edit the index.js and notice nodemon never sees the file change, and does not restart the process.

In the meantime, I've put together a working Node.js Express app setup that rebuilds with Nodemon on file changes github.com/blacksonic/node-docker-...

I don't know what is watched by Nodemon with the default setting, but to be sure I've specified what to watch, maybe that is the missing piece in your code.

 

You can also achieve everything in the compose file through cli arguments to docker. I wouldn't recommend using the cli like that though; the compose file keeps things repeatable.

I would recommend people learning docker learn how to use the cli to achieve what docker compose does, it'll help you understand what's going on underneath.

 

Can you share the equivalent cli command? I would share it in the article

 
docker run -v `pwd`:/app -p 8900:8900 node:12 sh -c "npm install && npm start"

In general, even though it might sound rude, but docs.docker.com/engine/reference/c... is pretty exhaustive and should be read first.

Nevertheless your approach to go for a docker compose solution helps to make it better portable also for other users/developer of your code.

Thank you for covering for me! I only just saw the reply comment. In addition to that you will need -w /app to change the working directory.

For completeness for anyone else reading,

  • -v mounts the volume /app to your current path (pwd gets your current path)
  • -p maps the ports. I would also change this -p localhost:8900:8900 just so it's only accessible from localhost
  • node:12 specifies the container image. Docker hub hosts the iamge
  • sh -c "..." is the command to run on entry
 

Good summary, thanks!

I wanted to try VS Code Server in docker (docs). Does anybody have experience with it?
It sounds like it would solve the same issue that you solved with docker compose.

 

I’ve used it primarily for side projects and it’s worked pretty well. Viscose does most of the heavy lifting for you, so the setup is pretty easy.

 

Thanks for the article :-)

I am interested in the advantages of developing with docker. Can anyone quickly name a few? One of them might be that you don't need Node installed (not that big deal) and another to run it on another OS... I would really appreciate more 😉 What is the greatest advantage?

 

You can have the same environment as in production (if the Node.js installation doesn't bother you).

 

Nice article Gábor.
I will recommend you to use PM2 with watcher mode enabled to re-build and re-run the node server every time you change some piece of code. In this way you don't need to restart de container.
Regards!

 

That one is a good point for Node projects 👍

 

Docker noob here, I thought Docker-Compose utilized the docker files? So you can have a docker compose without a dockerfile?

 

It can utilize Dockerfiles, but not necessary. Only need the Dockerfile when you want to customize the base image.

 
 

Another thing you can do is create a volume for your node modules because in this setup every time you start your container you will have to download all the dep again.

 

The volume remains there, it only checks for updates...or am I missing something?

code of conduct - report abuse