Docker & Front-End Web Development

In this post I share some docker commands that help me with simple front-end development tasks all without getting too invested in the tooling.

TL;DR

# install bulma css framework
docker run --rm -it -v $(pwd):/usr/src/app -w /usr/src/app node:slim npm install bulma
# compile sass code into css
docker run --rm -it -v $(pwd):/usr/src/app -w /usr/src/app ruby:alpine sh -c 'gem install sass && sass --watch sass/:css/'

I don't do a lot of front-end development (I actually try to avoid it where possible) so I use docker to run front-end tools inside of containers and keep them clear of my host machine. Not only do I run the tools inside of containers, I also don't want to maintain any custom Dockerfiles for these tools because it's more code to maintain and I'm a vanilla kind of guy so I want to use official images as much as possible.

I use the following commands to help me install the bulma css framework through npm and compile the styles to css using sass.

Installing Bulma Through NPM

Firstly, I run the following command to spin up a new node container and install bulma onto my host machine:

docker run --rm -it -v $(pwd):/usr/src/app -w /usr/src/app node:slim npm install bulma

After running the command you will have a new node_modules directory in your current directory; and inside the node_modules directory will be the bulma package.

Here's what the command is doing in a bit more detail:

  • docker run - run a command inside a new container
  • --rm - delete the container when finished
  • -it - use an interactive shell connection (allows for things like coloured output)
  • -v $(pwd):/usr/src/app - mount the current directory to the /user/src/app directory in the container
  • -w /usr/src/app - set the working directory inside the container to /usr/src/app
  • node:slim - use the 'slim' version of the node image to keep things light and simple
  • npm install bulma - use npm to install bulma

Installing & Running SASS

Now that I have bulma I will write my own styles into a sass directory and import bulma from the node_modules directory:

// sass/app.sass
@import "../node_modules/bulma/bulma.sass"

Then to compile the sass code down to css I run the following command:

docker run --rm -it -v $(pwd):/usr/src/app -w /usr/src/app ruby:alpine sh -c 'gem install sass && sass --watch sass/:css/'

It looks pretty complicated but it's almost identical the previous command, we've just replaced the node:slim npm install bulma bit on the end with ruby:alpine sh -c 'gem install sass && sass --watch sass/:css/'.

This spins up a new ruby container, installs sass on it, waches my sass directory for changes and compiles it into the css directory.

In a bit more detail:

  • docker run --rm -it -v $(pwd):/usr/src/app -w /usr/src/app - same as before
  • ruby:alpine - use the 'alpine' version of the ruby image (the alpine image is very light weight)
  • sh -c '... && ...' - we want to run more than one command so we pass it in as a string and get the shell to interpret it
  • gem install sass - install the sass tool
  • sass --watch sass/:css/ - use sass to watch the sass directory and compile it into the css directory

After running this command the css directory will be populated with the compiled styles from the sass directory.

Running sass --watch means the sass tool won't stop running and you have to force quite it by hitting ctrl-c when you want control of your terminal again.

Clean Up

You won't have any containers to clean up after running these commands however you will have the images lingering around:

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
node                slim                f10b17686226        24 hours ago        210.4 MB
ruby                alpine              2cb787aae656        3 days ago          128.7 MB

So if you wish to remove them at any point you can do so with the following commmand:

docker rmi <image-id>

But only do so if you know you're not going to be using them anymore.

Conclusion

These commands allow me to work with front-end tools all without having to pollute my host machine with said tools, and without having to maintain custom Dockerfiles either.

It shouldn't be hard to take this further and run grunt/gulp/whatever commands as well.