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 (optional step if docker-start fails with error)
• 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:

• Open a terminal window into the docker image and cat README.md
• note that it differs from the README.md in the repo
• Override the default README.md by adding a volume mapping in docker-compose.yml
• npm run docker-stop
• npm run docker-start
• note that the files are now in sync

Known limitations:

• docker-start (docker run) will fail if run outside the current users home directory.
• 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
• Docker Beta 13 fails to sync edits when using Webstorm 2016 and requires additional configuration. Edits using Sublime, for example, do get synced.
• webpack-dev-server needs polling set to support hot-loading on Windows 10.

Notes:

• If you encounter an "Unresolved function or method" error in Webstorm see http://stackoverflow.com/a/35893441 for resolution.
• 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: