Dockerizing your Angular development environment

Having to develop AngularJS apps on Windows, I know the pain of setting up the different tools required to develop and build your project. Also at work, we have people using different operating systems and the instructions I made for getting started with our AngularJS project weren’t often sufficient for everyone. Therefore I wanted to set up a Docker container that would have all the required dependencies and could be used to run and build our app.

Here’s a really simple guide how to do it.

I used a NodeJS image and just installed Gulp and Bower to it. Path /myapp is set to the work directory and the project folder on the local computer will be mapped to it when the container is started.

FROM node:carbon
VOLUME  ["/myapp"]
WORKDIR /myapp
RUN apt-get update
#install project dependencies
RUN npm install -g gulp
RUN npm install -g bower
#install project dependencies when container starts
CMD npm install && bower install

Once the Dockerfile is ready, we can build the image out of it by using the docker build command. The name of the image will be myapp, which can be used to start a container.

docker build -t myapp .

This must be run in the folder with the Dockerfile or you must replace the dot with the location of the Dockerfile.

Then the container must be run once to download the project dependencies. If you don’t pass any parameters to the docker run command, it runs the commands defined in the Dockerfile.

docker run — rm -v $PWD:/myapp myapp

Once the dependencies have been loaded, we can run our AngularJS app with gulp serve, making the app accessible via http://localhost:4000/.

docker run — rm -v $PWD:/myapp -p 4000:3000 myapp gulp serve

gulp build command runs the ‘build’ task from the gulp file, which in my case, builds the Angular project:

docker run --rm -v $PWD:/myapp myapp gulp build
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.