react_rails_webpack 1.1.0 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 195d4ed6a5da6fb44246c755535be02aa38eccd3
-  data.tar.gz: 316c5a00aec3b4894739637884cc94939499ae77
+  metadata.gz: 4d39753431cd013d16c4a744c9481404886093a7
+  data.tar.gz: 6a33e6cf4e7098edceb6089da732f435e4952f5b
 SHA512:
-  metadata.gz: 9e481e80ac9f68dc57120a38a2d0065b3abab6c6a7df8e5138d05a3b7fb38fbe4ee89674a8e7b6a98f275704060fc828da3e6f9334db2c3898fe136c6f5155e2
-  data.tar.gz: 891a05c9e757fbb2a2c84a1f495ca4ec763d5bc2e7f5ab453084965d5022adcdf38c6a2e58284d055394c9422d7c51b3abf31a4e11d95c19da868e3f4afe4966
+  metadata.gz: f8fcb6fba5381eef13521677f268ce8b942ac17984437a819c10a37515740107a9a8fb706e6af409b4602cb3a57e2b139a075ced00ca5b892760d26d775b1da6
+  data.tar.gz: 8b0102de4210f267b4914e4ea67b0770c516850a404064a1557c0dd42fd68bc19bba18ddcaf6abfcd554b6f4a39281beebb2fa80647ae475191369fa57113942

data/README.md

@@ -4,9 +4,10 @@ A set of Rails generators that create all the necessary boilerplate code (with e
 
 ## Key Features
 
-1. Use any packages from the npm ecosystem
-2. Automatically setup working demo examples so you can jump into React immediately
-3. Development server for React components will live update your changes to any device on your local network (including phones)
+1. One-command setup
+2. Use any packages from the npm ecosystem
+3. Automatically sets up working demo examples so you can jump into React immediately
+4. Development server for React components will live update your changes to any device on your local network (including phones)
 
 ## Quick Start
 
@@ -15,15 +16,29 @@ A set of Rails generators that create all the necessary boilerplate code (with e
 1. Make sure you have the [requirements](#requirements) installed
 2. Add `gem 'react_rails_webpack'` to your Gemfile
 3. Run `bundle install`
-4. Run `rails g react_rails_webpack:install` ([further explanation of what this does](#generating-the-integration))
-5. Run `npm run install`
-6. Run `npm run build`
+4. Run `rails g react_rails_webpack:install` ([further explanation of what this does](#how-does-this-work))
 
-### Add example page
+### Commands
 
-1. Run `rails g react_rails_webpack:create_example_page`
-2. Start the Rails server (run `rails server`)
-3. Go to [localhost:3000/greeting](http://localhost:3000/greeting) to see your React/Rails integration in action
+#### `rails g react_rails_webpack:install`
+
+Sets up the integration
+
+#### `rails g react_rails_webpack:create_example_page`
+
+Sets up an example page in your Rails app at  [localhost:3000/greeting](http://localhost:3000/greeting) that displays the two example components.
+
+#### `rails g react_rails_webpack:new_fork`
+
+You must run this whenever you clone a repo with a react_rails_webpack integration setup. It generates [the environment.json file](lib/react_rails_webpack/client/environment.json) based on your computer's network name. Since the network name will be different for most computers, this file is gitignored and needs to be regenerated for each new computer the project is cloned on.
+
+#### `rails g react_rails_webpack:info`
+
+This command will tell you the url of your webpack development server on your local network.
+
+#### `rails g react_rails_webpack:trailblazer_integration`
+
+If you use the Trailblazer gem, use this command to add a [trailblazer](https://github.com/apotonick/trailblazer) cell for react components to your `lib` folder.
 
 ### Suggested Development Workflow
 
@@ -52,47 +67,6 @@ When I looked over the available gems for react/rails integrations, none of them
 
 - This gem does not do server-side rendering, so if you need to do SEO stuff within your react components, it's probably the wrong choice
 
-## Installing the Gem
-
-Add this line to your application's Gemfile:
-
-```ruby
-gem 'react_rails_webpack'
-```
-
-And then execute:
-
-    $ bundle
-
-## Requirements
-
-- [Rails](http://rubyonrails.org/) 4.0+
-- [node](https://nodejs.org/) (tested on 4.2.2 and 5.4.1)
-- [npm](https://www.npmjs.com/) (tested on 3.4.0 and 3.5.3)
-
-## Generating the Integration
-
-Run the install generator like this:
-
-    $ rails g react_rails_webpack:install
-
-This will setup a basic react integration with some example components (one standard react component and one using react with redux) under [a client folder](lib/react_rails_webpack/client) in your project's root. Once the generator's run is done, run the commands below (from your project's root):
-
-**Note**: Make sure you have [node](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed on your machine before running these.
-
-    $ npm run install   # installs the needed npm packages
-    $ npm run build     # uses webpack to compile your javascript code to your assets folder
-
-Then set the dev server hostname ([instructions](#setting-the-dev-server-hostname)).
-
-## Generating an Example Page
-
-If you want to setup an example page in your Rails app that uses the provided React components, run:
-
-    $ rails g react_rails_webpack:create_example_page
-
-Then run the rails server and go to [the greeting page](http://localhost:3000/greeting) to see everything in action.
-
 ## Creating and using your own components
 
 Let's say you want to make a checkout form component with react. Here's what you'd need to do to use it from Rails:
@@ -131,29 +105,55 @@ export default {
 render_component "CheckoutForm", { customerName: 'Harper' }
 ```
 
-## Adding Trailblazer Integration
+NOTE: Unless you're sure you know what you're doing, do not edit anything in the [client/app](lib/react_rails_webpack/client/app) folder except [the availableComponents file](lib/react_rails_webpack/client/app/availableComponents.js)). Those files are where the integration works it's magic (though of course feel free to read the files to check out how everything works).
 
-Running this generator:
+## Working with the Webpack Dev Server
 
-    $ rails g react_rails_webpack:trailblazer_integration
+`npm run start` will start a webpack development server with hot reloading that is completely independent of your Rails app. You can see the output of this server on any computer or mobile device on your local network by going to the appropriate url (which you can find by running `rails g react_rails_webpack:info`). Any changes you make to your component files will be pushed immediately to all devices looking at the page.
 
-Will add a [trailblazer](https://github.com/apotonick/trailblazer) cell for react components to your `lib` folder.
+## How does this work?
 
+When you run the install generator like this:
 
-## Working with the Webpack Dev Server
+    $ rails g react_rails_webpack:install
+
+This gem will setup a basic react integration with some example components (one standard react component and one using react with redux) under [a client folder](lib/react_rails_webpack/client) in your project's root.
 
-`npm run start` will start a webpack development server with hot reloading that is completely independent of your Rails app. You can see the output of this server on any computer or mobile device on your local network by going to `computer-name.local:3000` (replace `computer-name.local` with [whatever you set hostname to](#setting-the-dev-server-hostname) in the `environment.json` file).
+The meat of the integration with Rails is in [the client/app folder](lib/react_rails_webpack/client/app), and [the app.js file](lib/react_rails_webpack/client/app.js). When your page loads in Rails, the `react_component` method creates divs that looks like this:
+
+```html
+<div class="react-component-target" data-componentname="ComponentName" data-componentprops="{myProp: 'some value'}">
+  <script>renderLastComponentDiv()</script>
+</div>
+```
+
+That example is what it would look like if you called it like with:
+
+```ruby
+react_component "ComponentName", {myProp: 'some value'}
+```
+
+When your browser hits that `renderLastComponentDiv()` call, it grabs the component name ("ComponentName") from the parent div, then looks it up in [the availableComponents.js file](lib/react_rails_webpack/client/app/availableComponents.js).
+
+NOTE: You MUST list all components that you will render with `react_component` in this file or it won't find anything.
+
+Assuming it finds a component that matches the name, it will immediately render that component within that div, passing in props from the `data-componentprops` attribute. As the page loads, each successive div generated by `react_component` renders this way.
 
 ## Gotchas
 
 ### Forgetting to run `npm run build`
 
-Remember, while your changes to components will hot reload when you use the webpack dev server, they will not show up at all in your Rails app until you run the `npm run build` command.
+Remember, while your changes to components will hot reload when you use the webpack dev server, they will not show up at all in your Rails app until you run the `npm run build` command. And they do NOT hot-reload when run in the context of your Rails app.
 
 ### Forgetting to add components to the `client/src/app/availableComponents.js` file
 
 Components will not be accessible from Rails if you forget to add them here.
 
+### Forgetting to run `rails g react_rails_webpack:new_fork` when cloning your repo on a new machine
+
+`rails g react_rails_webpack:new_fork` sets up [the environment.json file](lib/react_rails_webpack/client/environment.json), which is NOT included in your repo, because it contains information specific to each computer it is generated on.
+
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

data/lib/react_rails_webpack/app/views/react_example/greeting.html.erb

@@ -1,2 +1,3 @@
+<aside>Find the source for this page in app/views/react_example/greeting.html.erb</aside>
 <%= react_component "Hello", @props_for_hello_component %>
 <%= react_component "HelloWithRedux", @props_for_hello_with_redux_component %>

data/lib/react_rails_webpack/client/webpack.config.js

@@ -13,7 +13,8 @@ var config = getConfig({
           {
             // title: 'Site Title'
             // head: '<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>',
-            html: "<div class=\"react-component-target\" data-componentname=\"Hello\" data-componentprops='{ \"details\": \"My initial greeting was set with getInitialState in the client/src/components/Hello.jsx file.\" }'></div>" +
+            html: "<aside>Find the source for this page in client/webpack.config.js</aside>" +
+            "<div class=\"react-component-target\" data-componentname=\"Hello\" data-componentprops='{ \"details\": \"My initial greeting was set with getInitialState in the client/src/components/Hello.jsx file.\" }'></div>" +
             "<div class=\"react-component-target\" data-componentname=\"HelloWithRedux\" data-componentprops='{ \"details\": \"My initial greeting was set with initialState in the client/src/redux/reducer.js file.\" }'></div>"
           }
         )

data/lib/react_rails_webpack/info_generator.rb

@@ -0,0 +1,21 @@
+require 'rails/generators/base'
+require 'colorize'
+
+module ReactRailsWebpack
+  class InfoGenerator < Rails::Generators::Base
+    desc "This generator provides basic info about the react_rails_webpack integration."
+
+    source_root(File.join(File.expand_path(File.dirname(__FILE__))))
+
+    def print_info
+      puts
+      puts "-" * `tput cols`.to_i # print line of dashes
+      puts
+      puts "To run a live-reloading webpack server for you React \
+components, run #{'npm run start'.white.bold}, then go to #{(`scutil --get LocalHostName`.strip + '.local:3000').blue.bold}"
+      puts
+      puts "-" * `tput cols`.to_i # print line of dashes
+      puts
+    end
+  end
+end

data/lib/react_rails_webpack/install_generator.rb

@@ -1,5 +1,6 @@
 require 'rails/generators/base'
 require 'colorize'
+require_relative 'new_fork_generator'
 
 module ReactRailsWebpack
   class InstallGenerator < Rails::Generators::Base
@@ -7,6 +8,24 @@ module ReactRailsWebpack
 
     source_root(File.join(File.expand_path(File.dirname(__FILE__))))
 
+    def check_for_node
+      if `which node`.length == 0
+        puts "Looks like you don't have node installed yet."
+        puts "This generator cannot work without node."
+        puts "Go here to install it: #{'https://nodejs.org'.blue}"
+        exit
+      end
+    end
+
+    def check_for_npm
+      if `which npm`.length == 0
+        puts "Looks like you don't have npm installed yet."
+        puts "This generator cannot work without npm."
+        puts "Go here to install the latest version of node (which will include npm): #{'https://nodejs.org'.blue}"
+        exit
+      end
+    end
+
     def setup_client_folder
       puts 'Adding client folder...'
       directory 'client'
@@ -32,13 +51,6 @@ module ReactRailsWebpack
       end
     end
 
-    def set_environment_hostname
-      localhost_name = `scutil --get LocalHostName`.strip
-      puts "Setting localhost name to #{localhost_name}..."
-
-      gsub_file 'client/environment.json', /<<<LOCALHOST_NAME>>>/, localhost_name
-    end
-
     def add_webpack_asset_inclusion
       puts 'Adding asset includes...'
       # Add webpack folder to application asset paths
@@ -70,14 +82,21 @@ module ReactRailsWebpack
       ensure_prepended "@import '../webpack/*\n", 'app/assets/stylesheets/application.sass' if File.exist?('app/assets/stylesheets/application.sass')
     end
 
-    def print_reminders
+    def run_new_fork_generator
+      Rails::Generators.invoke('react_rails_webpack:new_fork')
+    end
+
+    def run_npm_install_and_build_and_then_say_whats_next
       puts
       puts "-" * `tput cols`.to_i # print line of dashes
       puts
-      puts "Done! Now #{"make sure you have node and npm installed".red.bold}, and then #{"run the".red.bold} #{"npm run install".white.bold} #{"and".red.bold} #{"npm run build".white.bold} #{"commands".red.bold} to finish setting up."
+      puts "Integration files all setup. Now running #{'npm run install'.white.bold} and \
+#{'npm run build'.white.bold} for you..."
       puts
       puts "-" * `tput cols`.to_i # print line of dashes
       puts
+      
+      exec('npm run install && npm run build; rails g react_rails_webpack:whats_next')
     end
 
 

data/lib/react_rails_webpack/new_fork_generator.rb

@@ -0,0 +1,24 @@
+require 'rails/generators/base'
+require 'colorize'
+
+module ReactRailsWebpack
+  class NewForkGenerator < Rails::Generators::Base
+    desc "This generator sets up the environment.json file for react/rails integration in a Rails app."
+
+    source_root(File.join(File.expand_path(File.dirname(__FILE__))))
+
+    def copy_environment_json_file
+      inside 'client' do
+        copy_file 'environment.json'
+      end
+    end
+
+    def set_environment_hostname
+
+      localhost_name = `scutil --get LocalHostName`.strip
+      puts "Setting localhost name to #{localhost_name}..."
+
+      gsub_file 'client/environment.json', /<<<LOCALHOST_NAME>>>/, localhost_name
+    end
+  end
+end

data/lib/react_rails_webpack/version.rb

@@ -1,3 +1,3 @@
 module ReactRailsWebpack
-  VERSION = "1.1.0"
+  VERSION = "1.2.1"
 end

data/lib/react_rails_webpack/whats_next_generator.rb

@@ -0,0 +1,35 @@
+require 'rails/generators/base'
+require 'colorize'
+
+module ReactRailsWebpack
+  class WhatsNextGenerator < Rails::Generators::Base
+    desc "This generator instructs the user on what to do \
+once the react_rails_webpack:install generator is done running."
+
+    source_root(File.join(File.expand_path(File.dirname(__FILE__))))
+
+    def say_whats_next
+      puts
+      puts "-" * `tput cols`.to_i # print line of dashes
+      puts
+      puts "DONE!"
+      puts
+      puts "Okay, #{'if you saw any errors'.red.bold} when the \
+#{'npm run install'.white.bold} and #{'npm run build'.white.bold} commands \
+were run just now, try running them again now manually."
+      puts
+      puts "#{"If you didn't get any errors".red.bold} you should be good to go, and \
+you can start your live-reloading webpack development server for React \
+by running the #{'npm run start'.white.bold} command and visiting \
+#{(`scutil --get LocalHostName`.strip+'.local:3000').blue.bold} in your browser \
+or on any other device on your local network (for example: your phone)."
+      puts
+      puts "#{'To generate an example page of React components inside your Rails app'.red.bold}, \
+run the #{'rails g react_rails_webpack:create_example_page'.white.bold} command."
+      puts
+      puts "-" * `tput cols`.to_i # print line of dashes
+      puts
+
+    end
+  end
+end

data/lib/react_rails_webpack.rb

@@ -4,6 +4,9 @@ module ReactRailsWebpack
   class ReactRailsWebpackRailtie < Rails::Railtie
     generators do
       require_relative 'react_rails_webpack/install_generator'
+      require_relative 'react_rails_webpack/new_fork_generator'
+      require_relative 'react_rails_webpack/whats_next_generator'
+      require_relative 'react_rails_webpack/info_generator'
       require_relative 'react_rails_webpack/create_example_page_generator'
       require_relative 'react_rails_webpack/trailblazer_integration_generator'
     end

data/react_rails_webpack.gemspec

@@ -19,7 +19,6 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
-  # spec.add_dependency("railties", ">= 4.1.0", "< 5.1")
   spec.add_dependency("rails", ">= 4")
   spec.add_dependency "colorize", ">= 0.7.7"
   spec.add_development_dependency "bundler", "~> 1.11"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_rails_webpack
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.1
 platform: ruby
 authors:
 - Neurodynamic
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-08-16 00:00:00.000000000 Z
+date: 2016-08-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -101,11 +101,14 @@ files:
 - lib/react_rails_webpack/client/test/test_helper.js
 - lib/react_rails_webpack/client/webpack.config.js
 - lib/react_rails_webpack/create_example_page_generator.rb
+- lib/react_rails_webpack/info_generator.rb
 - lib/react_rails_webpack/install_generator.rb
 - lib/react_rails_webpack/lib/react_cell.rb
+- lib/react_rails_webpack/new_fork_generator.rb
 - lib/react_rails_webpack/package.json
 - lib/react_rails_webpack/trailblazer_integration_generator.rb
 - lib/react_rails_webpack/version.rb
+- lib/react_rails_webpack/whats_next_generator.rb
 - react_rails_webpack.gemspec
 homepage: https://github.com/neurodynamic/react_rails_webpack
 licenses: