Initialize dockerized version

.dockerignore

@@ -0,0 +1,6 @@
+.git
+.gitignore
+node_modules
+client/node_modules
+tmp
+*.log

Dockerfile

@@ -0,0 +1,36 @@
+FROM ruby:2.5.3
+
+LABEL com.shakacode.vendor="https://www.shakacode.com"
+LABEL com.shakacode.description="ShakaCode's example of React on Rails plus React Native"
+LABEL com.shakacode.homepage="https://github.com/shakacode/react-webpack-rails-tutorial"
+LABEL com.thetonyrom.maintainer="Tony Rom <thetonyrom@gmail.com>"
+LABEL version="0.0.1"
+
+RUN curl -sL https://deb.nodesource.com/setup_8.x | bash
+RUN apt-get install -y nodejs
+RUN npm install -g yarn
+
+RUN curl -sS -o - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
+RUN echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
+RUN apt-get update && apt-get install -y \
+    google-chrome-stable
+
+RUN apt-get clean \
+    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
+
+WORKDIR /app
+COPY Gemfile* ./
+RUN bundle
+RUN chromedriver-update
+
+COPY package.json .
+COPY client/package.json client/yarn.lock client/
+RUN yarn
+
+COPY entrypoint.sh /usr/bin/
+RUN chmod +x /usr/bin/entrypoint.sh
+ENTRYPOINT ["entrypoint.sh"]
+
+EXPOSE 3000 4000 5000
+
+CMD foreman start -f Procfile.static

README.md

@@ -88,6 +88,7 @@ You can see this tutorial live here: [http://reactrails.com/](http://reactrails.
 + [Basic Demo Setup](#basic-demo-setup)
   + [Basic Command Line](#basic-command-line)
   + [Experimenting with Hot Reloading](#experimenting-with-hot-reloading-applies-to-both-procfilehot-and-procfileexpress)
+  + [Dockerized version](#dockerized-version)
 + [Javascript Development without Rails](#javascript-development-without-rails-using-the-webpack-dev-server)
 + [Rails Integration](#rails-integration)
 + [Webpack](#webpack)
@@ -163,6 +164,40 @@ See package.json and Gemfile for versions
 1. Try changing a `.scss` file, such as a color in [client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss](client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss). You can see port 3000 or 4000 update automatically.
 1. Be sure to take a look at the different Procfiles in this directory, as described below.
 
+### Dockerized version
+1. Set up your [Docker](https://docs.docker.com/) environment.
+1. Make sure that you have `docker` & `docker-compose` installed: `docker --version && docker-compose --version`
+1. `git clone git@github.com:shakacode/react-webpack-rails-tutorial.git`
+1. `cd react-webpack-rails-tutorial`
+1. `docker-compose up`
+1. After finish, setup your database in a separate terminal: `docker-compose run web rake db:setup`
+1. Open a browser tab to http://localhost:8000
+
+By default it uses `Procfile.static`. To run it in a different mode:
+
+```bash
+$ docker-compose run web foreman start -f Procfile.hot
+```
+
+**Note**:
+The Docker daemon binds to a Unix socket instead of a TCP port. By default that Unix socket is owned by the user `root` and other users can only access it using `sudo`. The Docker daemon always runs as the `root` user.
+If you don’t want to preface the `docker` command with `sudo`, create a Unix group called `docker` and add users to it. When the Docker daemon starts, it creates a Unix socket accessible by members of the `docker` group.
+
+```bash
+$ sudo groupadd docker
+$ sudo gpasswd -a $USER docker
+```
+
+**Warn**:
+Anyone added to the `docker` group is `root` equivalent. More information [here](https://github.com/moby/moby/issues/9976) and [here](https://docs.docker.com/engine/security/security/).
+
+**Note**:
+As mentioned above, the Docker daemon always runs as the `root` user. Because of that you can experience `Permission denied` issues on your host machine. You can grant it back to your user with the following command:
+
+```bash
+$ cd react-webpack-rails-tutorial
+$ sudo chown -R $USER:$USER .
+```
 
 ## Javascript development without Rails: using the Webpack Dev Server
 

config/cable.yml

@@ -5,7 +5,7 @@ production:
 
 development:
   adapter: redis
-  url: redis://localhost:6379/1
+  url: <%= ENV["REDIS_URL"] || 'redis://localhost:6379/1' %>
 
 test:
   adapter: async

config/database.yml

@@ -28,7 +28,8 @@
 # Uncomment below for a setup with just postgres and change your Gemfile to reflect this
 default: &default
   adapter: postgresql
-  username:
+  host: <%= ENV["DB_HOST"] || 'localhost' %>
+  username: postgres
   password:
 
 development:

docker-compose.yml

@@ -0,0 +1,25 @@
+version: '3'
+services:
+  web:
+    build: .
+    command: bash -c "foreman start -f Procfile.static"
+    volumes:
+      - .:/app
+      - /app/client/node_modules
+    ports:
+      - "8000:5000"
+      - "8001:4000"
+      - "8002:3000"
+    depends_on:
+      - db
+      - redis
+    environment:
+      - DB_HOST=db
+      - REDIS_URL=redis://redis:6379/1
+      - DRIVER=selenium_chrome_headless_docker_friendly
+  db:
+    image: postgres:alpine
+    volumes:
+      - ./tmp/db:/var/lib/postgresql/data
+  redis:
+    image: redis:alpine

entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+set -e
+
+# Remove a potentially pre-existing server.pid for Rails.
+rm -f /app/tmp/pids/server.pid
+
+# Then exec the container's main process (what's set as CMD in the Dockerfile).
+exec "$@"

spec/rails_helper.rb

@@ -69,7 +69,14 @@
   # selenium_firefox webdriver only works for Travis-CI builds.
   default_driver = :selenium_chrome_headless
 
-  supported_drivers = %i[ selenium_chrome_headless selenium_chrome selenium_firefox selenium]
+  supported_drivers = %i[
+    selenium_chrome_headless_docker_friendly
+    selenium_chrome_headless
+    selenium_chrome
+    selenium_firefox
+    selenium
+  ]
+
   driver = ENV["DRIVER"].try(:to_sym) || default_driver
   Capybara.default_driver = driver
 
@@ -82,6 +89,9 @@
   when :selenium_chrome_headless
     DriverRegistration.register_selenium_chrome_headless
 
+  when :selenium_chrome_headless_docker_friendly
+    DriverRegistration.register_selenium_chrome_headless_docker_friendly
+
   when :selenium_firefox, :selenium
     DriverRegistration.register_selenium_firefox
     driver = :selenium_firefox

spec/support/driver_registration.rb

@@ -32,4 +32,16 @@ def self.register_selenium_chrome_headless
     end
     @selenium_headless_registered = true
   end
+
+  def self.register_selenium_chrome_headless_docker_friendly
+    return if @selenium_docker_registered
+    Capybara.register_driver :selenium_chrome_headless_docker_friendly do |app|
+      capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(chromeOptions: { args: %w[no-sandbox headless disable-gpu] })
+      Capybara::Selenium::Driver.new app, browser: :chrome, desired_capabilities: capabilities
+    end
+    Capybara::Screenshot.register_driver(:selenium_chrome_headless_docker_friendly) do |js_driver, path|
+      js_driver.browser.save_screenshot(path)
+    end
+    @selenium_docker_registered = true
+  end
 end