Angular CLI is a great tool for developing  Angular 2 applications.  Now that the final 2.0 release is out and the masses are starting to be interested I thought it would be fun to do a quick demo of how you can try out the Angular CLI (github) project without having to install all the tools on your local machine.  The caveat there is that I assume you already have Docker installed.

To start we need to create a Dockerfile that will have all the tools we need ready. A good example of that file might look like this

FROM node

ENV HOME=/usr/src/app
RUN mkdir $HOME
WORKDIR $HOME

RUN npm install -g angular-cli

EXPOSE 4200
EXPOSE 49153

In that file we specify we want to use the current Node.js image as our base. Then we setup our home directory so our code will have a place to live. Next we use NPM (Node Package Manager) to install the Angular CLI tool chain. Then we expose the default port the Angular 2 project will be served to the browser from, and we open up the port that will be used for live reloading of code.

Next we want to create a docker-compose.yml file which will define our service we will use to execute the build commands and run our development web server iniside.

client:
    build: .
    ports:
        - "4200:4200"
        - "49153:49153"
    volumes:
        - .:/usr/src/app
    command: npm start

This file defines a service called “client” which will be built based on our Dockerfile we just created. We map the ports from the container onto our local machine and specify that we would like this directory mounted inside the container as a volume at /usr/src/app which is our home directory defined in the Dockerfile.

The final step is to build our image so we can use it to run containers.

docker-compose build

With our docker requirements in place we are ready to actually play with Angular CLI.

docker-compose run --rm client ng init --skip-npm --name CliDemo
docker-compose run --rm client npm install

This will run through the creation of a fresh Angular 2 project and run NPM to install all the dependencies required. The only configuration change required to this code because of our docker environment is to update the start script to bind to all interfaces. Please edit this line in our package.json file

...
"start": "ng serve --host 0.0.0.0",
...

Finally we just need to start the watcher and development web server

docker-compose up

This will compile the project and start a development web server running on http://localhost:4200/.  Fire up your browser and give that page a look. Congratulations! You created a fresh Angular 2 project and compiled it and ran it in your browser.

NOTE: If you are not using linux, or the new Docker Native for OSX and Windows then you will need to use the IP of your docker-machine instead of localhost in the url above.

[UPDATE: 1/1/2017] After having used this several times I have noticed that it seems to always fail on the npm install when run as part of the project generation. So I have separated those steps above. Also I added a github repo if you want to grab the files.

Share This