Docker for javascript front-end apps.

Introduction All we know that the docker registry is fully populated with user contributed images that can handle a wide variety of scenarios. Anyway, also is true that not all this images were created following the same standars as the [official images]( You can check more info at the end of this article. In this article we intend to provide a base image for both, building and develop front-end applications using bower and gulp. At the same time we mostly try, to follow the bests practices for docker. Getting started. The overall idea is to create a Dockerfile in the base folder of the project that inherits from our predefined docker image. An example could be:
FROM devecoop/gulp-bower:node-0.10.38-onbuild
    EXPOSE 3000
In this particular case we added `EXPOSE 3000` to indicate that is the port where our application we'll be running. Development workflow. With this approach you can use docker to improve the development flow. And also you can use the same configuration to build and deploy the frontend app. So, the first time you run the docker you must build the image with:
$ docker build -t my-gulp-bower-image .
And then create the container, but this time we are going to mount the project folder inside the container so we can work with the files from outside.
$ docker run -it -v $PWD:/usr/src/app my-gulp-bower-image serve
You can also specify options for bind the 3000 port to the host computer (for our case it wasn't necessary, we use the container ip for testing). As you can see, we used 'serve' as a command to run in the container, the container is configured to run gulp plus the specified command. So, in our case we started the development server inside docker (you can check in detail how it works in Moreover, supposing that another developer has added some dependencies to bower for example. We can run:
$ docker exec -it  bash
To enter in the container and run `bower install` for example.Alternatively, we can rebuild the image and create the container again. Or better, use docker-compose to automate this. Take note that docker's exec command is not available in all docker versions. Deployment workflow. In this case we only need to specify build as the end of the docker command:
$ docker run --rm -it -v $PWD:/usr/src/app my-gulp-bower-image build
In our case, the builded application ends in the dist/ directory, so we only need to copy that to the production server. In addition, we added the `--rm` to indicate docker to discard the container once the process is finished. Possible enhancements and references. Of course, this guide could be improved adding docker compose to automatize even more the flow. Also we can go deeper and integrate the sample Dockerfile to a Yeoman Generator.
  • GitHub Repo with the dockerfiles
  • Guidelines that the official image creators must comply
  • Best Practices on writing dockerfiles.