DEV Community

Cover image for Frontend Development with Docker simplified

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,...
Collapse
 
victorioberra profile image
Victorio Berra

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

Collapse
 
sonicoder profile image
Gábor Soós

Can you show an example repo?

Collapse
 
victorioberra profile image
Victorio Berra

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.

Thread Thread
 
sonicoder profile image
Gábor Soós

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

Thread Thread
 
sonicoder profile image
Gábor Soós

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.

Thread Thread
 
victorioberra profile image
Victorio Berra
Collapse
 
sonicoder profile image
Gábor Soós

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

Collapse
 
embiem profile image
Martin Beierling-Mutz

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.

Collapse
 
omawhite profile image
Omar White

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.

Collapse
 
crr0004 profile image
Chris Rhodes

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.

Collapse
 
sonicoder profile image
Gábor Soós

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

Collapse
 
iampgab profile image
Paul Gabriel
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.

Thread Thread
 
crr0004 profile image
Chris Rhodes

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
Collapse
 
jannikwempe profile image
Jannik Wempe

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?

Collapse
 
sonicoder profile image
Gábor Soós

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

Collapse
 
marcossv9 profile image
Marcos Silva

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!

Collapse
 
sonicoder profile image
Gábor Soós

That one is a good point for Node projects 👍

Collapse
 
guilhermeorcezi profile image
Guilherme Orcezi

Awesome! Great job.

Collapse
 
isamessa profile image
MaherzzAcehStudenovz • Edited

It one is a nice point for Node projects.
Anyone who need of Samsung Driver feel easy to visit it or Driver Samsung. Many thanks

Collapse
 
jrock2004 profile image
John Costanzo

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.

Collapse
 
sonicoder profile image
Gábor Soós

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

Collapse
 
victorioberra profile image
Victorio Berra

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

Collapse
 
sonicoder profile image
Gábor Soós

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