From 5f7f60f4c54f93099bf1404ae1c3467228bf68ce Mon Sep 17 00:00:00 2001 From: Rob Landers Date: Sat, 21 May 2016 17:35:05 -0400 Subject: [PATCH 1/5] Add docker to yeoman generator --- .../generators/app/templates/Dockerfile | 5 +++++ .../generators/app/templates/README.md | 15 +++++++++++++-- .../generators/app/templates/docker-compose.yml | 16 ++++++++++++++++ 3 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 packages/generator-react-server/generators/app/templates/Dockerfile create mode 100644 packages/generator-react-server/generators/app/templates/docker-compose.yml diff --git a/packages/generator-react-server/generators/app/templates/Dockerfile b/packages/generator-react-server/generators/app/templates/Dockerfile new file mode 100644 index 000000000..dc7eabba1 --- /dev/null +++ b/packages/generator-react-server/generators/app/templates/Dockerfile @@ -0,0 +1,5 @@ +FROM node:slim + +EXPOSE 3000 +ENV NODE_ENV=docker-dev +VOLUME /www \ No newline at end of file diff --git a/packages/generator-react-server/generators/app/templates/README.md b/packages/generator-react-server/generators/app/templates/README.md index a9c1f30c7..19e9a511b 100644 --- a/packages/generator-react-server/generators/app/templates/README.md +++ b/packages/generator-react-server/generators/app/templates/README.md @@ -4,7 +4,7 @@ Very simple example project for `react-server` which only shows server rendering To start in development mode: -``` +```shell npm start ``` @@ -12,7 +12,18 @@ Then go to [localhost:3000](http://localhost:3000/). You will see a simple page If you want to optimize the client code at the expense of startup time, type `NODE_ENV=production npm start`. You can also use any of [the other arguments for react-server-cli](../../react-server-cli#setting-options-manually) after `--`. For example: -``` +```shell # start in dev mode on port 4000 npm start -- --port=4000 ``` + +# Developing using Docker and Docker Compose + +These steps assume you are familiar with docker and already have it installed. + +Before getting started you'll need to configure the host to use your docker-machine or docker daemon. See [The docs](https://github.com/redfin/react-server/tree/master/packages/react-server-cli) for how to do this. + +```shell +docker-compose build --pull +docker-compose up +``` \ No newline at end of file diff --git a/packages/generator-react-server/generators/app/templates/docker-compose.yml b/packages/generator-react-server/generators/app/templates/docker-compose.yml new file mode 100644 index 000000000..372f41b08 --- /dev/null +++ b/packages/generator-react-server/generators/app/templates/docker-compose.yml @@ -0,0 +1,16 @@ +version: '2' +services: + react: + build: . + volumes: + - .:/www + - react_node_modules:/www/node_modules + working_dir: /www + environment: + NODE_ENV: 'docker' + command: /bin/bash -c "npm install && npm start" + ports: + - '3000:3000' + - '3001:3001' +volumes: + react_node_modules: \ No newline at end of file From 1f97b34daf37b77fc6531863c8dea4e00c4c416c Mon Sep 17 00:00:00 2001 From: Rob Landers Date: Sat, 21 May 2016 20:42:13 -0400 Subject: [PATCH 2/5] Updated README and comments --- .../generators/app/templates/README.md | 44 +++++++++++++++++-- .../app/templates/docker-compose.yml | 26 ++++++----- 2 files changed, 56 insertions(+), 14 deletions(-) diff --git a/packages/generator-react-server/generators/app/templates/README.md b/packages/generator-react-server/generators/app/templates/README.md index 19e9a511b..d3097dcf4 100644 --- a/packages/generator-react-server/generators/app/templates/README.md +++ b/packages/generator-react-server/generators/app/templates/README.md @@ -19,11 +19,47 @@ npm start -- --port=4000 # Developing using Docker and Docker Compose -These steps assume you are familiar with docker and already have it installed. - -Before getting started you'll need to configure the host to use your docker-machine or docker daemon. See [The docs](https://github.com/redfin/react-server/tree/master/packages/react-server-cli) for how to do this. +These steps assume you are familiar with docker and already have it installed. Some basics: +1. Download [Docker Toolbox](https://www.docker.com/products/docker-toolbox) and install it. +2. Start `docker quick start shell` +3. Navigate to where you generated the project +4. Add a configuration to set the `host` option to the ip given by `docker-machine ip`. An example configuration might be like: +```json +{ + "port": "3000", + "env": { + "docker": { + "host": "docker.local" # Your ip from `docker-machine ip` here + }, + "staging": { + "port": "3000" + }, + "production": { + "port": "80" + } + } +} +``` +5. Now that your system is ready to go, start the containers: ```shell docker-compose build --pull docker-compose up -``` \ No newline at end of file +``` + +The containers will now be running. At any time, press ctrl+c to stop them. + +To clean up, run the following commands: + +```shell +docker-compose stop +docker-compose rm --all +docker volume ls # and get the name of the volume ending in react_server_node_modules +docker volume rm _react_server_node_modules # this name will be different depending on the name of the project +``` + +The configuration included stores the node_modules directory in a "named volume". This is a special +persistent data-store that Docker uses to keep around the node_modules directory so that they don't have to +be built on each run of the container. If you need to get into the container in order to investigate what +is in the volume, you can run `docker-compose exec react_server bash` which will open a shell in the +container. Be aware that the exec functionality doesn't exist in Windows (as of this writing). \ No newline at end of file diff --git a/packages/generator-react-server/generators/app/templates/docker-compose.yml b/packages/generator-react-server/generators/app/templates/docker-compose.yml index 372f41b08..0464d7898 100644 --- a/packages/generator-react-server/generators/app/templates/docker-compose.yml +++ b/packages/generator-react-server/generators/app/templates/docker-compose.yml @@ -1,16 +1,22 @@ version: '2' services: - react: - build: . - volumes: - - .:/www - - react_node_modules:/www/node_modules - working_dir: /www + react_server: # The label of the service + build: . # The location of the Dockerfile to build + volumes: # Files to share with the container and the host + - .:/www # Share the project in /www in the container + - react_server_node_modules:/www/node_modules # A special volume so that OS specific node_modules are built correctly + working_dir: /www # The location all commands should run from environment: - NODE_ENV: 'docker' - command: /bin/bash -c "npm install && npm start" - ports: + NODE_ENV: 'docker' # Set the NODE_ENV environment variable + command: /bin/bash -c "npm install && npm start" # The command to run in when the container starts + ports: # Ports to expose to your host - '3000:3000' - '3001:3001' + # An example database + # my_db: + # image: rethinkdb:latest + # You can reference the db/service by using the dns name `my_db` and docker will do the rest + +# Volume to store separate from the container runtime and host volumes: - react_node_modules: \ No newline at end of file + react_server_node_modules: \ No newline at end of file From 1df765d2b30a065e9ae8705fd9aec07870acd92c Mon Sep 17 00:00:00 2001 From: Rob Landers Date: Sat, 21 May 2016 20:44:05 -0400 Subject: [PATCH 3/5] Got to love GitHub syntax highlighting --- .../generator-react-server/generators/app/templates/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/generator-react-server/generators/app/templates/README.md b/packages/generator-react-server/generators/app/templates/README.md index d3097dcf4..49d3a16e9 100644 --- a/packages/generator-react-server/generators/app/templates/README.md +++ b/packages/generator-react-server/generators/app/templates/README.md @@ -30,7 +30,7 @@ These steps assume you are familiar with docker and already have it installed. S "port": "3000", "env": { "docker": { - "host": "docker.local" # Your ip from `docker-machine ip` here + "host": "Your ip from `docker-machine ip` here" }, "staging": { "port": "3000" From 12be333366a7f9d87342e77dbedb4a8c1810e928 Mon Sep 17 00:00:00 2001 From: Rob Landers Date: Mon, 23 May 2016 20:32:24 -0400 Subject: [PATCH 4/5] Added dockerfile as a prompt and added unit tests --- .../generators/app/index.js | 17 ++++++++++-- packages/generator-react-server/test/app.js | 27 ++++++++++++++++--- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/generator-react-server/generators/app/index.js b/packages/generator-react-server/generators/app/index.js index 3fb4ec202..94088083f 100644 --- a/packages/generator-react-server/generators/app/index.js +++ b/packages/generator-react-server/generators/app/index.js @@ -14,6 +14,11 @@ module.exports = yeoman.Base.extend({ name: 'name', message: 'What would you like to call your app?', default: this.appname + },{ + type: 'confirm', + name: 'dockerCfg', + message: 'Do you want to generate a Docker file and Docker Compose file?', + default: false }]; return this.prompt(prompts).then(function (props) { @@ -23,6 +28,7 @@ module.exports = yeoman.Base.extend({ writing: function () { var _this = this; + [ '_babelrc', '_gitignore' @@ -35,13 +41,20 @@ module.exports = yeoman.Base.extend({ ); }); - [ + let files = [ 'hello-world-page.js', 'hello-world.js', 'package.json', 'README.md', 'routes.js' - ].forEach(function (filename) { + ]; + + if (this.props.dockerCfg) { + files.push('Dockerfile'); + files.push('docker-compose.yml'); + } + + files.forEach(function (filename) { _this.fs.copyTpl( _this.templatePath(filename), _this.destinationPath(filename), diff --git a/packages/generator-react-server/test/app.js b/packages/generator-react-server/test/app.js index a6688626f..bd779f00e 100644 --- a/packages/generator-react-server/test/app.js +++ b/packages/generator-react-server/test/app.js @@ -4,13 +4,13 @@ import path from 'path'; import test from 'ava'; import helpers from 'yeoman-test'; -test('generator-react-server:app creates files', async t => { +test('generator-react-server:app creates default files', async t => { let testDir; await helpers.run(path.join(__dirname, '../generators/app')) .inTmpDir(dir => { testDir = dir; }) - .withPrompts({name: 'foo'}) + .withPrompts({name: 'foo', dockerCfg: false}) .toPromise(); t.true(await exists('.babelrc', testDir)); t.true(await exists('.gitignore', testDir)); @@ -19,6 +19,27 @@ test('generator-react-server:app creates files', async t => { t.true(await exists('package.json', testDir)); t.true(await exists('README.md', testDir)); t.true(await exists('routes.js', testDir)); + t.false(await exists('Dockerfile', testDir)); + t.false(await exists('docker-compose.yml', testDir)); +}); + +test('generator-react-server:app creates docker files', async t => { + let testDir; + await helpers.run(path.join(__dirname, '../generators/app')) + .inTmpDir(dir => { + testDir = dir; + }) + .withPrompts({name: 'foo', dockerCfg: true}) + .toPromise(); + t.true(await exists('.babelrc', testDir)); + t.true(await exists('.gitignore', testDir)); + t.true(await exists('hello-world-page.js', testDir)); + t.true(await exists('hello-world.js', testDir)); + t.true(await exists('package.json', testDir)); + t.true(await exists('README.md', testDir)); + t.true(await exists('routes.js', testDir)); + t.true(await exists('Dockerfile', testDir)); + t.true(await exists('docker-compose.yml', testDir)); }); test('generator-react-server:app passes the test target', async t => { @@ -27,7 +48,7 @@ test('generator-react-server:app passes the test target', async t => { .inTmpDir(dir => { testDir = dir; }) - .withPrompts({name: 'foo'}) + .withPrompts({name: 'foo', dockerCfg: false}) .toPromise(); await installDeps(); t.true(await runsSuccessfully('npm test')); From b4fa9995b9ee8a23d60025bef7f25bc0b38420aa Mon Sep 17 00:00:00 2001 From: Rob Landers Date: Tue, 24 May 2016 20:32:14 -0400 Subject: [PATCH 5/5] Fix style issue --- packages/generator-react-server/generators/app/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/generator-react-server/generators/app/index.js b/packages/generator-react-server/generators/app/index.js index 94088083f..03f09fcea 100644 --- a/packages/generator-react-server/generators/app/index.js +++ b/packages/generator-react-server/generators/app/index.js @@ -14,7 +14,7 @@ module.exports = yeoman.Base.extend({ name: 'name', message: 'What would you like to call your app?', default: this.appname - },{ + }, { type: 'confirm', name: 'dockerCfg', message: 'Do you want to generate a Docker file and Docker Compose file?',