This picture was taken by my Rolleiflex Automat II

A Very Basic Browser-Sync Development Environment Based on Docker

The purpose is to set up a very basic environment based on Docker for me to play HTML, CSS and Javascript like Codepen or plunkr. However, embedding images in these site is cumbersome.

The requirement is: 1. browser should automatically refresh when HTML, CSS and Javascript files change, 2. being able to use images in the html file, 3. I want to keep my own machine minimal , that is I don’t want install node.js and browser-sync locally.

The first step is to build a docker image with browser-sync install. The following Dockerfile should do.

FROM node:lts-alpine
WORKDIR /app
RUN apk update && apk upgrade
#install browser-sync
RUN npm install -g browser-sync

The most important line is RUN npm install -g browser-sync which installs browser-sync globally.

In the directory where the Dockerfile resides, using following command to create the image. Note the trailing dot which is necessary.

docker build -t="your-own-image-tag" .

The option t designates the tag of the newly created image. Now the image is ready.

To run the container, use the following command.

docker run -it --rm \
-v $(pwd):/app \
-p 3000:3000 \
-p 3001:3001 \
your-own-image-tag \
browser-sync start \
--server \
--files \"*.html, *.js, *.css,css/*.css, js/*.js\" \
--no-open false

A complicated command, um…! Explanation is necessary for me, because I definitely forget some day.

-it tells docker to run this container interactively with a terminal.

-rm tells docker to delete this container after the container is stopped.

-v binds a host directory to a directory in the container. The format is host-directory:directory-in-container. With this option, files in the host and in the container are actually the same copy. Changes of the files synchronize.

-p 3000:3000 tells docker to map the port 3000 (the first 3000 before the column :) of the host to the port 3000 (the second 3000 after the column :) of the container. Browser-sync uses port 3000 to serve the site as default.

-p 3001:3001 tells docker to map the port 3001 (the first 3001 before the column :) of the host to the port 3001 (the second 3001 after the column :) of the container. Browser-sync uses port 3001 to provide a UI to manage its options.

your-own-image-tag is the image tag that is just created.

browser-sync start is the command to be executed after the container is initiated.

--server tells browser-sync to start a static server for basic HTML/JS/CSS websites.

— files \"*.html, *.js, *.css, *.jpg,css/*.css, js/*.js, img/*.jpg\" tells browser-sync to watch all files with extension of html, js, css, jpg; also watch the files in directories css, js, andimg with the same extension. In short, this option tells browser-sync to watch all static files in current working directory and sub-directories. \ is for escaping.

--no-open false tells browser-sync not to open a browser because it is run in a environment without a browser.

Now a very simple server that serves static files runs, and I can see the following image. I can simple right click the link to open the website.

message emitted by browser-sync

For convenience, I store the command which runs the container in a shell script named start-browser-sync in my home directory. Make the script executable with the following command.

chmod +x start-browser-sync

Now I can use this simple web server with one command. Make a directory with a index.html with the following content.

<!DOCTYPE html>
<html>
<head>
<title>Browser-Sync Test</title>
</head>
<body>
<h1>Browser-Sync works in root</h1>
</body>
</html>

Then cd to this directory, use the shell script with the command,

~/start-browser-sync

A simple static web server is now running, and it watches all changes I make.

Another way to run the command is to use alias. Just copy and paste following code. Don’t forget the escaping character \. This annoys me for months.

alias serve="docker run -it --rm \\
-v \$(pwd):/app \\
-p 3000:3000 -p 3001:3001 \\
cmwang/browser-sync browser-sync start \\
--server --files \"*.html, *.js, *.css,css/*.css, js/*.js\" \\
--no-open false"

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Advanced Flutter Forms (part 2)

2gather’s Beta Platform Preview

Apache Kafka Steaming: Everything you need to know before you Kickstart!

Building Beautiful UI in Flutter

Kubernetes as a service simplifies public and private cloud management

Programmers Should Step Out of Their Comfort Zone

A Partial History of the SCLENDS Library Consortium in South Carolina

Easy PDF to Word Conversion

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chun Ming Wang

Chun Ming Wang

More from Medium

Docker and Container Basics

How to unlock the pgadmin ui

Docker with commands

Flask JWT based Authentication and Authorization Library Survey