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.
# 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.
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.
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.
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.
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
gulp/whatever commands as well.