A Docker Image for CSS Development Using Semantic-UI

You may not want to install Nodejs just for CSS development with semantic-UI. This simple Docker image is all you need.

Features of this image are:

1. no need to install Nodejs locally

2. install semantic-UI locally

The Dockerfile to create the image is:

FROM node:lts-alpine
RUN apk update && apk upgrade
RUN npm install -g gulp
RUN mkdir /app
WORKDIR /app

Build the image with a appropriate tag. The tag used here is semantic-ui.

The command to run the container is:

docker run -it --rm \
-v $(pwd):/app \
--user $(id -u):$(id -g) \
semantic-ui /bin/sh

This shell script mount the current working directory to /app in the container, and login into the container as the same user in the same group in the host to prevent from permission issues.

Run the installation command to install semantic-UI, after get in the container.

For automatically refreshing pages during development, please read A Very Basic Browser-Sync Development Environment Based on Docker for more detail. You will find this small tool convenient.

There is one important point. You may run into an error cast by browser-sync that says the number of watched files exceeds the limit. The solution is to tell browser-sync to ignore directories where too many files resides.

An example shell script is:

docker run -it --rm \
-v $(pwd):/app \
-p 3000:3000 \
browser-sync \
browser-sync start \
--server \
--files \"*.html, *.js, *.css, css/*.css, js/*.js\" \
--ignore 'semantic' 'node_modules' \
--no-open false

Don’t need to escape the single quotes after the — ignore option. This took me an hour to fix. :).

EDIT: (2019/08/25)

You can watch all files and sub-directories with this alias:

alias serve-semantic="docker run -it --rm \\
-v \$(pwd):/app \\
-p 3000:3000 -p 3001:3001  \\
cmwang/browser-sync browser-sync start \\
--server \\
--files \"**/*\" \\
--ignore 'semantic' 'node_modules' \\
--no-open false"

If you want to use an alias to run the script, please add a back slash \ to $(pwd)`. That is \$(pwd).

There is difference between the shell script and alias. You can figure it out by yourself. 😅

Now you are good to go. Happy coding.