Merge pull request #606 from mesosphere/feature/2556-docker-based-dev…

…elopment-environment

Provide a docker based development environment

README.md

@@ -5,9 +5,11 @@
 
 ## The web user interface for Mesosphere's Marathon
 
-The UI is bundled with the [Marathon](https://github.com/mesosphere/marathon) package.
+The UI is bundled with the [Marathon](https://github.com/mesosphere/marathon)
+package.
 
-Please note that issues are disabled for this repository. Please feel free to open an issue on the
+Please note that issues are disabled for this repository. Please feel free to
+open an issue on the
 [issues page on the main Marathon Repository](https://github.com/mesosphere/marathon/issues?q=is%3Aopen+is%3Aissue+label%3Agui).
 
 #### Documentation
@@ -17,34 +19,104 @@ https://mesosphere.github.io/marathon/docs/marathon-ui.html.
 
 #### Setup
 
-1. Install Mesos and Marathon (follow the [tutorial here](https://mesosphere.github.io/marathon/docs/))
-2. Setup a CORS proxy on your machine to proxy the UI requests to your running Marathon instance (e.g. via [Corsproxy](https://www.npmjs.com/package/corsproxy))
-3. Install [Node 5](https://nodejs.org/en/blog/release/v5.0.0/) and [NPM](https://npmjs.org/)
+---
+ There are two ways to set up and configure your development environment:
 
-4. Install dev dependencies
+1. 🤖 Set up Mesos and Marathon following this
+  [tutorial](https://mesosphere.github.io/marathon/docs/) and install a CORS
+  proxy on your machine.
+2. 🐳 Use the handy docker-based setup
+
+___
+
+##### 🤖 Prerequisites
+
+There are a few things you need, before you can start working. Please make sure
+you've installed and properly configured the following software:
+
+* [Node 5](https://nodejs.org/en/blog/release/v5.0.0/) including
+  [NPM](https://npmjs.org/)
+* Mesos and Marathon (follow the
+	[tutorial here](https://mesosphere.github.io/marathon/docs/))
+* Set up a CORS proxy on your machine to proxy the UI requests to your running
+  Marathon instance (e.g. via Corsproxy)
+
+##### 🤖 1. Install all dependencies
 
         npm install
         npm install -g gulp
 
-5. Override development configuration
+##### 🤖 2. Override development configuration
 
     1. Copy `src/js/config/config.template.js` to `src/js/config/config.dev.js`
-    2. Override variables in `config.dev.js` to reflect your local development configuration
+    2. Override variables in `config.dev.js` to reflect your local development
+    configuration
 
-6. Run development environment
+##### 🤖 3. Run development environment
 
   ```
   npm run serve
   ```
-  
+
   or
-  
+
   ```
   npm run livereload
   ```
 
-  for a `browsersync` live-reload server.
+ for a `browsersync` live-reload server.
+
+
+---
+
+##### 🐳 Prerequisites
+
+Please make sure you've installed and properly configured the following
+software:
+
+* [Node 5](https://nodejs.org/en/blog/release/v5.0.0/) including
+  [NPM](https://npmjs.org/)
+* [Docker 1.9](https://www.docker.com/)
+
+
+##### 🐳 1. Install all dependencies
+
+        npm install
+        npm install -g gulp
+
+##### 🐳 2. Configure your hosts
+
+If you're not using something like
+[dnsdock](https://github.com/tonistiigi/dnsdock) or
+[dinghy](https://github.com/codekitchen/dinghy) (OS X) for easy container
+discovery/access, please configure your hosts as follows:
+
+      mesos-master.docker 192.168.99.100
+      mesos-slave.docker  192.168.99.100
+      marathon.docker     192.168.99.100
+
+*Use `$ docker-machine ip $DOCKER_MACHINE_NAME` to get the current docker
+machine ip and add those lines to your `etc/hosts` configuration.*
+
+
+##### 🐳 4. Start your environment
+
+The following command will download, configure and start a basic Zookeeper,
+Mesos and Marathon setup for you. It will also serve the Marathon UI.
+
+       docker-compose up
+
+##### 🐳 5. Build your very own Marathon UI
+
+Running the following command will build the Marathon UI and watch for file
+changes to rerun the build.
+
+       npm run serve
+
+Open http://marathon.docker:8080 to enjoy your fresh build.
 
 #### Contributing to this project
 
-Please refer to the [CONTRIBUTING.md](https://github.com/mesosphere/marathon-ui/blob/master/CONTRIBUTING.md) file.
+Please refer to the
+[CONTRIBUTING.md](https://github.com/mesosphere/marathon-ui/blob/master/CONTRIBUTING.md)
+file.