basic-heroku-deployment

.buildpacks

@@ -0,0 +1,2 @@
+https://github.com/heroku/heroku-buildpack-nodejs.git
+https://github.com/heroku/heroku-buildpack-ruby.git

.gitignore

@@ -15,3 +15,9 @@
 /log/*
 !/log/.keep
 /tmp
+# React on Rails
+npm-debug.log
+node_modules
+
+# Generated js bundles
+/app/assets/javascripts/generated/*

Gemfile

@@ -1,5 +1,7 @@
 source 'https://rubygems.org'
 
+gem 'react_on_rails', path: '../react_on_rails'
+
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '4.2.5'
@@ -44,3 +46,10 @@ group :development do
   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
   gem 'spring'
 end
+
+# For Heroku deployment
+gem 'rails_12factor', group: :production
+gem 'puma', group: :production
+
+
+gem 'bootstrap-sass'

Gemfile.lock

@@ -1,3 +1,13 @@
+PATH
+  remote: ../react_on_rails
+  specs:
+    react_on_rails (3.0.3)
+      connection_pool
+      execjs (~> 2.5)
+      foreman
+      rails (>= 3.2)
+      rainbow (~> 2.1)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -37,8 +47,14 @@ GEM
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     arel (6.0.3)
+    autoprefixer-rails (6.3.1)
+      execjs
+      json
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
+    bootstrap-sass (3.3.6)
+      autoprefixer-rails (>= 5.2.1)
+      sass (>= 3.3.4)
     builder (3.2.2)
     byebug (8.2.1)
     coffee-rails (4.1.1)
@@ -49,9 +65,12 @@ GEM
       execjs
     coffee-script-source (1.10.0)
     concurrent-ruby (1.0.0)
+    connection_pool (2.2.0)
     debug_inspector (0.0.2)
     erubis (2.7.0)
     execjs (2.6.0)
+    foreman (0.78.0)
+      thor (~> 0.19.1)
     globalid (0.3.6)
       activesupport (>= 4.1.0)
     i18n (0.7.0)
@@ -73,6 +92,7 @@ GEM
     multi_json (1.11.2)
     nokogiri (1.6.7.1)
       mini_portile2 (~> 2.0.0.rc2)
+    puma (2.16.0)
     rack (1.6.4)
     rack-test (0.6.3)
       rack (>= 1.0)
@@ -95,11 +115,17 @@ GEM
       rails-deprecated_sanitizer (>= 1.0.1)
     rails-html-sanitizer (1.0.2)
       loofah (~> 2.0)
+    rails_12factor (0.0.3)
+      rails_serve_static_assets
+      rails_stdout_logging
+    rails_serve_static_assets (0.0.5)
+    rails_stdout_logging (0.0.4)
     railties (4.2.5)
       actionpack (= 4.2.5)
       activesupport (= 4.2.5)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
+    rainbow (2.1.0)
     rake (10.5.0)
     rdoc (4.2.1)
     sass (3.4.21)
@@ -141,11 +167,15 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bootstrap-sass
   byebug
   coffee-rails (~> 4.1.0)
   jbuilder (~> 2.0)
   jquery-rails
+  puma
   rails (= 4.2.5)
+  rails_12factor
+  react_on_rails!
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)
   spring

Procfile

@@ -0,0 +1 @@
+web: bundle exec puma -C config/puma.rb

Procfile.dev

@@ -0,0 +1,3 @@
+web: rails s
+client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
+

Procfile.dev-hot

@@ -0,0 +1,4 @@
+web: rails s
+# TODO: MIGRATE from tutorial
+client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
+

REACT_ON_RAILS.md

@@ -0,0 +1,16 @@
+The `react_on_rails` gem has been installed. You can view the documentation online at
+[React on Rails](https://github.com/shakacode/react_on_rails).
+
+Also, check out the [example application](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/server.js)
+for a live example and code.
+
+The "Hello World" example has been installed.
+
++ The view is located at `app/views/hello_world/index.html.erb`
++ The controller is located at `app/controllers/hello_world_controller.rb`
+
+See [the documentation](https://github.com/shakacode/react_on_rails) for how to build your bundles and
+install your packages. Then you can view the example as follows:
+
+- Rails Server: [localhost:3000/hello_world](http://localhost:3000/hello_world)
+- Webpack Development Server with HMR: [localhost:4000/hello_world](http://localhost:4000/hello_world)

app/assets/javascripts/application.js

@@ -1,3 +1,12 @@
+// DO NOT REQUIRE jQuery or jQuery-ujs in this file!
+// DO NOT REQUIRE TREE!
+
+// CRITICAL that generated/vendor-bundle must be BEFORE bootstrap-sprockets and turbolinks
+// since it is exposing jQuery and jQuery-ujs
+
+//= require generated/vendor-bundle
+//= require generated/app-bundle
+
 // This is a manifest file that'll be compiled into application.js, which will include all the files
 // listed below.
 //
@@ -10,7 +19,11 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
-//= require jquery_ujs
+// require jquery
+// require jquery_ujs
 //= require turbolinks
-//= require_tree .
+// require_tree .
+
+// bootstrap-sprockets depends on generated/vendor-bundle for jQuery.
+//= require bootstrap-sprockets
+

app/assets/stylesheets/_bootstrap-custom.scss

@@ -0,0 +1,63 @@
+// This file loads Bootstrap by importing components explicitly instead of doing `@import 'bootstrap';`
+// Doing so allows for customization of exactly which components are imported.
+// The components themselves are made available via bootstrap-sass (https://github.com/twbs/bootstrap-sass#sass)
+
+// IMPORTANT: Make sure to keep the customizations defined in this file
+//            in-sync with the ones defined in client/bootstrap-sass.config.js.
+
+// For a reference on customizations,refer to:
+//  https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss
+
+// If you are looking to merely change bootstrap variables from their default,
+// you should instead declare them in client/assets/stylesheets/_post-bootstrap.scss
+
+// Core variables and mixins
+@import 'bootstrap/variables';
+@import 'bootstrap/mixins';
+
+// Reset and dependencies
+@import 'bootstrap/normalize';
+@import 'bootstrap/print';
+@import 'bootstrap/glyphicons';
+
+// Core CSS
+@import 'bootstrap/scaffolding';
+@import 'bootstrap/type';
+@import 'bootstrap/code';
+@import 'bootstrap/grid';
+@import 'bootstrap/tables';
+@import 'bootstrap/forms';
+@import 'bootstrap/buttons';
+
+// Components
+@import 'bootstrap/component-animations';
+@import 'bootstrap/dropdowns';
+@import 'bootstrap/button-groups';
+@import 'bootstrap/input-groups';
+@import 'bootstrap/navs';
+@import 'bootstrap/navbar';
+@import 'bootstrap/breadcrumbs';
+@import 'bootstrap/pagination';
+@import 'bootstrap/pager';
+@import 'bootstrap/labels';
+@import 'bootstrap/badges';
+@import 'bootstrap/jumbotron';
+@import 'bootstrap/thumbnails';
+@import 'bootstrap/alerts';
+@import 'bootstrap/progress-bars';
+@import 'bootstrap/media';
+@import 'bootstrap/list-group';
+@import 'bootstrap/panels';
+@import 'bootstrap/responsive-embed';
+@import 'bootstrap/wells';
+@import 'bootstrap/close';
+
+// Components w/ JavaScript
+@import 'bootstrap/modals';
+@import 'bootstrap/tooltip';
+@import 'bootstrap/popovers';
+@import 'bootstrap/carousel';
+
+// Utility classes
+@import 'bootstrap/utilities';
+@import 'bootstrap/responsive-utilities';

app/assets/stylesheets/application.scss

@@ -0,0 +1,36 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+
+
+ */
+// DO NOT REQUIRE TREE! It will interfere with load order!
+
+// Account for differences between Rails and Webpack Sass code.
+$rails: true;
+
+// Included from bootstrap-sprockets gem and loaded in app/assets/javascripts/application.rb
+@import 'bootstrap-sprockets';
+
+// Customizations - needs to be imported after bootstrap-sprocket but before bootstrap-custom!
+// The _pre-bootstrap.scss file is located under
+// client/assets/stylesheets, which has been added to the Rails asset
+// pipeline search path. See config/application.rb.
+@import 'pre-bootstrap';
+
+// These scss files are located under client/assets/stylesheets
+// (which has been added to the Rails asset pipeline search path in config/application.rb).
+@import 'bootstrap-custom';
+
+// This must come after all the boostrap styles are loaded so that these styles can override those.
+@import 'post-bootstrap';
+

app/controllers/hello_world_controller.rb

@@ -0,0 +1,5 @@
+class HelloWorldController < ApplicationController
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end

app/views/hello_world/index.html.erb

@@ -0,0 +1,4 @@
+<h1 class="alert alert-info this-works">Client Rendering</h1>
+<%= react_component("HelloWorldApp",
+                     props: @hello_world_props,
+                     prerender: false) %>

client/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}

client/.eslintignore

@@ -0,0 +1 @@
+node_modules

client/.eslintrc

@@ -0,0 +1,48 @@
+---
+parser: babel-eslint
+
+extends: eslint-config-shakacode
+
+plugins:
+  - react
+
+globals:
+  __DEBUG_SERVER_ERRORS__: true
+  __SERVER_ERRORS__: true
+
+env:
+  browser: true
+  node: true
+  mocha: true
+
+rules:
+  ### Variables
+  no-undef: 2
+  no-unused-vars: [2, { vars: all, args: none }]
+
+  ### Stylistic issues
+  indent: [1, 2, { SwitchCase: 1, VariableDeclarator: 2 }]
+  id-length: [1, { min: 2, exceptions: [_, e, i, k, v] }]
+
+  ### React
+  jsx-quotes: [1, prefer-double]
+  react/display-name: 0
+  react/jsx-boolean-value: [1, always]
+  react/jsx-curly-spacing: [1, never]
+  react/jsx-no-duplicate-props: [2, { ignoreCase: true }]
+  react/jsx-no-undef: 2
+  react/jsx-sort-prop-types: 0
+  react/jsx-sort-props: 0
+  react/jsx-uses-react: 2
+  react/jsx-uses-vars: 2
+  react/no-danger: 0
+  react/no-did-mount-set-state: 1
+  react/no-did-update-set-state: 0
+  react/no-multi-comp: 2
+  react/no-unknown-property: 2
+  react/prop-types: 1
+  react/react-in-jsx-scope: 2
+  react/require-extension: [1, { extensions: [.js, .jsx] }]
+  react/self-closing-comp: 2
+  react/sort-comp: 0                                                            # Should be 1. `statics` should be on top.
+  react/wrap-multilines: 2

client/.jscsrc

@@ -0,0 +1,18 @@
+{
+  "preset": "airbnb",
+  "fileExtensions": [
+    ".js",
+    ".jsx"
+  ],
+  "excludeFiles": [
+    "assets/**",
+    "build/**",
+    "node_modules/**"
+  ],
+  "esprima": "babel-jscs",
+  "validateQuoteMarks": {
+    "mark": "'",
+    "escape": true,
+    "ignoreJSX": true
+  }
+}

client/REACT_ON_RAILS_CLIENT_README.md

@@ -0,0 +1,3 @@
+Client folder generated by React on Rails gem.
+
+See documentation [on github](https://github.com/shakacode/react_on_rails) for details on how it is organized.