diff --git a/Dockerfile b/Dockerfile index 8ba10cc..a01042d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,23 +1,44 @@ -# Yeoman with some generators and prerequisites -FROM ubuntu:saucy -MAINTAINER Kevin Littlejohn +#Build an image that can run generator-gulp-angular +FROM ubuntu:trusty +MAINTAINER Ajay Ganapathy RUN apt-get -yq update && apt-get -yq upgrade +# # Install pre-requisites -RUN apt-get -yq install python-software-properties software-properties-common \ - python g++ make git ruby-compass libfreetype6 -# Install node.js, then npm install yo and the generators -RUN add-apt-repository ppa:chris-lea/node.js -y \ - && apt-get -yq update \ +RUN apt-get -yq install python-software-properties \ + software-properties-common \ + python \ + g++ \ + make \ + git \ + libfreetype6 +# +# Install node.js, yo, gulp, bower, and generator-gulp-angular +RUN apt-get install -yq curl \ + && curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash - \ && apt-get -yq install nodejs \ - && npm install yo -g \ - && npm install -g generator-webapp generator-angular -# Add a yeoman user because grunt doesn't like being root -RUN adduser --disabled-password --gecos "" yeoman; \ + && apt-get -yq update \ + && npm install -g yo \ + && npm update +# +# Add a yeoman user because yeoman doesn't like being root +RUN adduser --disabled-password --gecos "" --shell /bin/bash yeoman; \ echo "yeoman ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers ENV HOME /home/yeoman +# +# set up a directory that will hold the files we sync from the host machine +RUN mkdir /home/yeoman/my-project-root \ + # set up a directory for global npm packages that does not require root access + && mkdir /home/yeoman/.npm_global \ + && chmod -R 777 /home/yeoman +ENV NPM_CONFIG_PREFIX /home/yeoman/.npm_global +WORKDIR /home/yeoman/my-project-root +VOLUME /home/yeoman/my-project-root +# +#--------------------------------------------------- +#You will need to uncomment the following line to expose the ports on which your generator serves web pages. For example, the gulp-angular generator serves webpages on ports 3000 and 3001, while other generators use port 9000. +#EXPOSE 3000-3001 +#--------------------------------------------------- +# +# drop to yeoman user and a bash shell USER yeoman -WORKDIR /home/yeoman -# Expose the port -EXPOSE 9000 -# Always run as the yeoman user -CMD ['/bin/bash'] +CMD ["/bin/bash"] diff --git a/README.md b/README.md index a9c0a56..7b9f50c 100644 --- a/README.md +++ b/README.md @@ -1,59 +1,39 @@ -## yeoman - - -**Dockerfile** for base yeoman install, with a few generators pre-installed. - +# Dockerized-Yeoman +This dockerfile builds a container with [yeoman](http://yeoman.io), [generator-gulp-angular](https://github.com/swiip/generator-gulp-angular#readme). I wrote this dockerfile because yeoman does not run as the root, and default docker containers run executables as root. This means that if you spin up a docker container and then try to run yeoman, [it will fail](https://github.com/yeoman/yeoman.github.io/issues/282). ### Installation - -1. Install [Docker](https://www.docker.io/). - -2. `docker run -i -t silarsis/yeoman` - - (alternatively, build from github: `docker build -t="silarsis/yeoman" github.com/silarsis/yeoman`) +1. [Set up Docker on Mac OS X.](https://docs.docker.com/mac/ "Docker for Mac Quick Start") +2. Open the Docker CLI from within Kitematic ![Cursor pressing the ‘docker CLI’ button in the lower-left-hand corner of the kitematic window](https://i.imgur.com/quKAxcG.gif) +3. Then change the directory to the `yeoman-docker` folder in this project's root: +```shell +cd ~/my-repository/yeoman-docker +``` +Replace `my-repository` with project's root. This folder should contain a file named `dockerfile`. + +4. Build the docker image with the following command: + ```shell + docker build . + ``` + The output of this command should look like [this](https://asciinema.org/a/36633). +5. Once the docker image has built, run it: + ```shell + docker run -dit my-image-hash + ``` + Replace `my-image-hash` with the unique identifier that docker gave to your image after building it e.g. [`fa817ac6674d`](https://asciinema.org/a/36633?t=10&autoplay=0). ### Usage -`docker run -i -t silarsis/yeoman` - -This will run the container and log you in as the "yeoman" user, ready to "yo". - -`docker run -i -t silarsis/yeoman -c grunt serve` - -This will run the grunt server inside the container. - -### Notes - -"sudo" works - if you need root, `sudo -s` will get you there. - -The default grunt port (9000) is exposed by default. - -Docker hints: - - - `docker start -a -i ` will restart a stopped container and re-attach you to the bash process - - `docker inspect -format '{{ .NetworkSettings.IPAddress }}' ` will give you the IP address of the currently running container - - `docker run -P -i -t silarsis/yeoman` will map port 9000 to a port on the host, and `docker port 9000` will show you what port that ends up on - -This Dockerfile should provide a good base image for development work - as an example, based on the [Docker Node.js example](http://docs.docker.io/en/latest/examples/nodejs_web_app/), you could have a Dockerfile that looks like (**untested**, assumes your code is in the same directory as your Dockerfile): - -``` - FROM silarsis/yeoman - MAINTAINER Kevin Littlejohn "kevin@littlejohn.id.au" - ADD . /src - RUN cd /src; npm install - EXPOSE 9000 - USER yeoman - CMD ["grunt", "serve"] +1. Sync your project's root folder to the docker container's shared volume with Kitematic ![Cursor switching to the docker container’s ‘settings’ tab, then selecting the ‘volumes’ sub-tab, and finally pressing the ‘change’ button next to the volume to connect](https://i.imgur.com/tdJd9qV.gif) +2. Map the docker container ports to the docker host. In this docker container, ports `3000` and `3001` are exposed. Port `3000` is where browser sync serves the site, and port `3001` is where it serves its own control panel. To keep things simple, you might want to map the port on the docker container to the same port number in Kitematic, *i.e.* port `3000` on the docker container maps to the IP address and port `192.168.99.100:3000` in Kitematic, and port `3001` maps to `192.168.99.100:3001`. However, if those ports are already mapped to another application, such as a MongoDB server or docker container, you can map them to whatever available ports you have.![Cursor selecting docker container, then ‘settings’ tab, then ‘ports’ sub-tab, then entering port numbers 3000 and 3001 in the text input fields underneath the ‘MAC IP:PORT’ header](https://i.imgur.com/r2cv7zE.gif) +3. Shell into the docker container. ![Cursor pressing the ‘exec’ button in kitematic](https://i.imgur.com/krIbsQg.gif) +3. serve the site with the following command: +```shell +gulp serve ``` +4. Find the IP Address to which the site is being served in kitematic, and enter it into your browser’s URL bar to navigate to the running site. ![`gulp serve` command entered into the docker container shell, followed by cursor switching to the ‘settings’ tab and ‘ports’ sub-tab before hovering over the IP address listed under ‘configure ports’ ](https://i.imgur.com/uT14x81.gif) -and run with `docker build -t /yeoman-dev .`; `docker run -P -d /yeoman-dev` - - -In application source, put in Gruntfile.js hostname:0.0.0.0 for expose port 9000 on the host for any IP: +### Roadmap +This is not a full-fledged project with semantic versioning. However, I might add the following features later if it is convenient for me: +- bash completions +- automatically run `npm install && bower install` on container startup as yeoman user, before dropping to a shell. - connect: { - options: { - port: 9000, - // Change this to '0.0.0.0' to access the server from outside. - hostname: '0.0.0.0', - livereload: 35729 - }, +> If you take the time to add these features, just send me a PR and I’ll merge them in! \ No newline at end of file