Sample Docker Workflow using Docker for Mac Beta

The following was performed using Docker for Mac Beta with Webstorm on a Mac as the development environment but should work in any environment that supports docker natively (dlite may also work in place of Docker Beta) along with node/npm and the pwd command. For more background see Why Docker.

Steps:

• Check your Docker Beta version by entering docker -v at the terminal prompt. Docker version 1.11.1, build 5604cbe is the latest as of May 12, 2016.
• Enter docker ps and verify the docker daemon is running.
• Clone the github repo Docker Workflow to a location under your user folder (~/).
• Verify you have the docker-workflow branch
• Open the local repo in the IDE
• Open a terminal
• npm install -g docker-run which adds support for running docker from npm
• npm run docker-start from a terminal or use the npm tool window
• Once processing completes, open a browser window at http://localhost:2368
• Make some changes in ng2-webpack-demo-app/src/app/components/home/template.html
• Observe that your changes are reflected in the browser without having to refresh

Extra Credit:

• Override the default karma.config by adding a copy in your projects root folder.
• Add a volume mapping in /config/docker-run.js

Known limitations:

• docker-start (docker run) will fail if run outside the current users home directory.
• Currently only package.json and the src directory are mapped via volumes. A better approach would be to introspect all top level files and directories and add a -v entry for each.
• IDE's like Webstorm will attempt to validate import paths, the imports may be in the container so disable the inspection in preferences
• Debugging unit tests can be challenging, see issue 11

Notes:

• package.json defaults to using 2368:2368 for port mapping, if you choose to use mis-matched ports (i.e. 2368:32700), hot-loading will fail. If you need to use another port you can choose from 8000, 8080, 3000, 5000, 2368, 9200, and 8983.
• Kitematic WEB PREVIEW will only test the first port exposed, so if you want to see the preview use port 2368.
• The latest Docker Beta exposes http://localhost, Kitematic still expects http://docker.local, in order to link directly from Kitematic you will need to add docker.local to your hosts file: sudo nano /private/etc/hosts adding: 0.0.0.0 docker.local
• generator-ng2-webpack on DockerHub

Screen shots: