Add Support generator to build a template webpack setup #53

aaronvb · 2015-10-09T02:50:48Z

> rails generate react_on_rails:install

Created generators for:

React and Redux folders
Assets folder
Symlinks for images and fonts of they exist
Blank global jsx files
Update gitignore to ignore node modules
Insert generated and react_on_rails includes into application.js
Copy react_on_rails.rb config to app/initializers
Nodejs server files for the hot reload
Webpack config files
npm package

I moved rails engine to its own file to be more explicit.

Regarding the npm package.json, I copied it from the tutorial repo. I'm not sure if all of those packages should be included in the gem, or if you want to slim it down to the barebones react libraries.

justin808 · 2015-10-09T03:09:49Z

Checking this out now! @rstudner can you give this a try? or any others on the team. I'll take a quick look as well.

justin808 · 2015-10-09T03:23:57Z

lib/generators/react_on_rails/directory_generator.rb

+    class DirectoryGenerator < Rails::Generators::Base
+      source_root File.expand_path("../templates", __FILE__)
+
+      def create_react_and_redux_dir


Could we, should we, have the flux system (redux) to be optional?

I think it is okay if the project is 'opinionated' on Redux (and willing to switch to the most valuable Flux implementation in the future if it switches). Have an option, to 'opt-out' of having redux as the default. But it is okay if the generator provides 'react_on_rails' opinion on the best seed/starter setup.

I think @rstudner is correct, with an option to opt-out. 👍

justin808 · 2015-10-09T03:30:00Z

For file: lib/generators/react_on_rails/templates/client/app/startup/clientGlobals.jsx and some of the other files, let's put in a few useful doc links on what is supposed to go in these files. We can provide:

URL to example file in the tutorial
A few sample lines

justin808 · 2015-10-09T03:32:27Z

lib/generators/react_on_rails/setup_files_generator.rb

+
+      def update_application_js
+        insert_into_file "app/assets/javascripts/application.js",
+                         before: "//= require_tree ." do


There's no guarantee that require_tree . will be in application.js. I've never used that.

This is what we have in the tutorial:

// Need to be on top to allow Poltergeist test to work with React. //= require es5-shim/es5-shim //= require react_on_rails // It is important that generated/vendor-bundle must be before bootstrap since it is exposing jQuery and jQuery-ujs //= require generated/vendor-bundle //= require generated/app-bundle //= require bootstrap-sprockets //= require turbolinks

Good point, I was basing this off a fresh rails project. I'll have to look through the Thor docs a little more to see what I can do to get it before bootstrap and before tree if tree exists.

+1 I think deleting require_tree in application.js is a first two-minutes operation for many projects :)

justin808 · 2015-10-09T03:52:21Z

Wow! Great start! Let's consider getting this in v1.0.0, or very shortly thereafter. @aaronvb Don't hesitate to ask us if you have any questions. If you need any help with the suggestions, please let us know. This is very useful.

aaronvb · 2015-10-09T04:48:43Z

@justin808 Thanks for the feedback. I'll be going through this over the next few days and will join you guys in Slack for any questions. A lot of what I have in here was extracted from the webpack tutorial, so I expected lots of changes and fixes.

aaronvb · 2015-10-13T09:42:34Z

I've pushed updates to all the files noted above and added:

Made changes to the generators to separate react and redux.
Added the JS linter files so npm run lint works now
Readme's

Install stays the same, except it doesn't create the redux folders or include the redux packages in package.json

rails generate react_on_rails:install

Install with redux will do the same as the regular install, but create the redux directories and include redux in the package.json.

rails generate react_on_rails:install_with_redux

Please review the copy in both README files.

TODO: Update the gem README with instructions on how to use the generator.

rstudner · 2015-10-13T10:44:19Z

Do we want to add a command line parameter for indicating 0.13 vs 0.14 setup (exposing ReactDOM and ReactDOMServer as appropriate)

derencius · 2015-10-15T17:51:42Z

lib/generators/react_on_rails/setup_files_generator.rb

+      end
+
+      def update_application_js
+        append_to_file "app/assets/javascripts/application.js" do


I have one app that uses application.js.coffee and the generator breaks here. Also, one suggestion is to use prepend instead of append, because probably those requires should be on top.

bellow an attempt to add support for application.js.coffee and to show a message if no application.js/js.coffee file is found.

def update_application_js data = "\n// It is important that generated/vendor-bundle must be before bootstrap since it is exposing jQuery and jQuery-ujs\n//= require generated/vendor-bundle\n//= require generated/app-bundle\n//= require react_on_rails\n\n" if File.exists?("app/assets/javascripts/application.js") prepend_to_file "app/assets/javascripts/application.js", data elsif File.exists?("app/assets/javascripts/application.js.coffee") prepend_to_file "app/assets/javascripts/application.js.coffee", data else puts "** app/assets/javascripts/application.js was not found. please add the following content to your main javascript file:\n\n#{data}\n\n" end end

@derencius Awesome, thanks for the feedback. I'll will test this out now and update the method.

justin808 · 2015-10-15T21:07:56Z

@rstudner @aaronvb Regarding any command line param for the old react, there's probably no need if we're doing a generator. As far as I can tell, React 0.14 gives warnings for the deprecations, so those are relatively easy to fix.

That being said, there could be cross dependencies that might not yet like React 0.14.

So if it's easy to add a param, then sure, but this is not a huge priority, at least not until at least one person really wants it.

rstudner · 2015-10-16T15:15:39Z

Correct -- is definitely not necessary. Just suggested it since some people get all upset when their chrome console has warnings in it they don't understand ;)

justin808 · 2015-10-16T19:38:47Z

@rstudner You mean terminal, right?

justin808 · 2015-10-16T19:39:37Z

@aaronvb would you say this is ready to go? I'll take a look at this tomorrow, and give it a spin.

aaronvb · 2015-10-16T20:04:16Z

@justin808 In my opinion, yes. If all looks good to you, I will update the README.md in the gem with instructions on using the generate install.

rstudner · 2015-10-17T15:18:26Z

@justin808 Sorry I missed this in the email. yeah, I meant terminal sorry. If we didn't expose ReactDOMServer, then the gem would correctly fall back to just use React, which for 0.14 on the server side would generate terminal warnings. (0.15 they will remove the methods/deprecation warnings completely but that is in the future)

liorbrauer · 2015-10-18T09:07:12Z

@aaronvb I tested this PR on my project, using Rails 3.2.22/Ruby 2.2.2, it works very nice. Saving A LOT of boilerplate. Thanks for this 👍

I will report if I find anything useful.

rstudner · 2015-10-18T12:10:34Z

Does the Procfile.dev etc need to get created (is that part of the boilerplate)

I do realize there are other ways to startup the rails & node servers in parallel etc.

But since the react-webpack-rails-tutorial project has the 'opinion' to do Procfile.dev should this?

justin808 · 2015-10-18T17:46:54Z

Procfile.dev is very handy and well worth adding.

justin808 · 2015-10-19T18:19:56Z

I'm going to take this over for now. Thanks @aaronvb!

dylangrafmyre · 2015-10-19T21:08:39Z

From CI build. Rubocop errors.

gugl · 2015-10-19T21:24:22Z

I recommend setting the .babelrc stage to 2 or 1 as stage 0 is not considered recommended for production code.

alex35mil · 2015-10-19T21:53:54Z

@gugl We're on the stage 0 mainly because of static properties. Moreover base libs (like redux & react-router) are compiled with stage 0, so anyway we're using it in production.

justin808 · 2015-10-19T23:27:39Z

Next up:

Add linter gems to Gemfile
Add hello world react component -- let's use the same simple setup we use for the spec/dummy app
Don't run webpack in the fresh generator install, as it doesn't pick the version just installed. P

Per running steps:

From directory of react_on_rails, with a test app named "react_on_rails_gen"

cd ..
rails new react_on_rails_gen
cd react_on_rails_gen
git init
git add .
git commit -m "Rails new plus react_on_rails"

Edit the Gemfile, adding these 2 lines:

gem 'react_on_rails', path: '../react_on_rails'
gem 'therubyracer'

Note the relative path to the react_on_rails gem.

bundle
git commit -am "added react_on_rails gem"
rails generate react_on_rails:install

Then you can see the changes that the generator did, ready for a commit.

Then run:

foreman start -f Procfile.dev

Then visit ports 3000 and 4000.

That's it!

justin808 · 2015-10-19T23:29:25Z

For extra credit:

Add bootstrap sass options
Add some tests.

However, we can do those in a separate PR.

justin808 · 2015-10-19T23:34:50Z

@aaronvb Let's run some basic sanity check that nvm, npm, node are installed and abort the generator with a link to get those installed. I think this is going to be the basic stumbling block for most of the ruby community when they first see this.

aaronvb · 2015-10-21T00:07:38Z

Added linter gems to Gemfile.

Added a simple react hello world component that demonstrates client rendering, server rendering, and hot reload.

You can generate the hello world files by using rails generate react_on_rails:hello_world After generating the initial install.

Removed running webpack after initial install.

Added a check for npm and node before installing, will abort with a message containing a url to the libraries.

aaronvb · 2015-10-21T00:09:28Z

Fixing CI errors now.

justin808 · 2015-10-21T08:14:43Z

@aaronvb
Just pulled latest. Looking AWESOME

ci.rake file is empty
clientGlobals.jsx should have the hello world setup
putting an empty images directory. That should probably be a symlink: https://github.com/shakacode/react-webpack-rails-tutorial/tree/master/client/assets Same for fonts.
Need to put in current versions of node and npm: https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/package.json#L7
Nice job on client/README.md
Let's have server globals be there
Let's have the hello world example do server rendering.

Overall, very awesome!

necronet · 2015-10-21T20:58:58Z

lib/generators/react_on_rails/templates/lib/tasks/assets.rake

+  end
+
+  task :clobber do
+    rm_rf "#{RailsReactTutorial::Application.config.root}/app/assets/javascripts/generated/client-bundle.js"


Where is RailsReactTutorial defined?

@necronet This needs to be updated, thanks for catching this. The assets.rake was pulled from https://github.com/shakacode/react-webpack-rails-tutorial - sorry for the confusion.

@necronet Good point. @aaronvb Please use Rails.application.config.root.

@aaronvb We should update the tutorial as well, in case others copy it. @robwise Can you do a search and replace on that one? Thanks!

@justin808 @aaronvb Changes made in tutorial on shakacode/react-webpack-rails-tutorial#129

aaronvb · 2015-10-21T23:56:50Z

@justin808

ci.rake file is empty
Fixed
clientGlobals.jsx should have the hello world setup
The clientGlobals.jsx gets updated with the hello world setup when using the rails generate react_on_rails:hello_world generator. I can have the hello world example code created with the main install generator.
putting an empty images directory. That should probably be a symlink: https://github.com/shakacode/react-webpack-rails-tutorial/tree/master/client/assets Same for fonts.
Images and font directories are symlinks and can only be symlinked if they exist. In a new Rails app, the font directory does not exist so a symlink is not created. See https://github.com/aaronvb/react_on_rails/blob/generators/lib/generators/react_on_rails/setup_files_generator.rb#L8
Need to put in current versions of node and npm: https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/package.json#L7
Fixed
Let's have server globals be there
See 2
Let's have the hello world example do server rendering.
https://github.com/aaronvb/react_on_rails/blob/generators/lib/generators/react_on_rails/templates/hello_world/app/views/pages/index.html.erb#L4

necronet · 2015-10-22T14:43:40Z

lib/generators/react_on_rails/templates/client/server.js

+
+server.listen(4000, 'localhost', function(err) {
+  if (err) console.log(err);
+  console.log('Listening at localhost:3000...');


Shouldnt this be 'Listening at localhost:4000...' ?

Should be:

console.log('Listening at localhost:' + this.address().port + '...');

rails generate react_on_rails:install rails generate react_on_rails:install --with-redux rails generate react_on_rails:install --with-hello-world-example rails generate react_on_rails:install --with-server-rendering rails generate react_on_rails:install --with-redux --with-server-rendering rails generate react_on_rails:install --with-hello-world-example --with-server-rendering

robwise · 2015-10-22T20:37:33Z

The work for this PR branch has been merged to a new branch on the original repo: https://github.com/shakacode/react_on_rails/tree/add-generators

robwise · 2015-10-23T05:49:28Z

@justin808 I propose that we close this so as to ensure all future progress is made on #70, right?

justin808 reviewed Oct 9, 2015
View reviewed changes

justin808 mentioned this pull request Oct 12, 2015

Add assets.rake #46

Closed

derencius reviewed Oct 15, 2015
View reviewed changes

aaronvb force-pushed the generators branch from b096e97 to a6ceede Compare October 19, 2015 20:55

aaronvb force-pushed the generators branch from bd8e49e to bd55d26 Compare October 21, 2015 00:01

aaronvb force-pushed the generators branch 2 times, most recently from 758477f to 43d6b43 Compare October 21, 2015 07:28

necronet reviewed Oct 21, 2015
View reviewed changes

robwise mentioned this pull request Oct 22, 2015

Change calls of ReactOnRails to Rails.application shakacode/react-webpack-rails-tutorial#129

Merged

necronet reviewed Oct 22, 2015
View reviewed changes

aaronvb added 2 commits October 22, 2015 10:11

Update README with new params.

ab737b8

aaronvb force-pushed the generators branch from 0503ab2 to ab737b8 Compare October 22, 2015 20:24

justin808 mentioned this pull request Oct 23, 2015

Add generators #70

Merged

justin808 closed this Oct 23, 2015

Add Support generator to build a template webpack setup #53

Add Support generator to build a template webpack setup #53

Conversation

aaronvb commented Oct 9, 2015

justin808 commented Oct 9, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justin808 commented Oct 9, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justin808 commented Oct 9, 2015

aaronvb commented Oct 9, 2015

aaronvb commented Oct 13, 2015

rstudner commented Oct 13, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justin808 commented Oct 15, 2015

rstudner commented Oct 16, 2015

justin808 commented Oct 16, 2015

justin808 commented Oct 16, 2015

aaronvb commented Oct 16, 2015

rstudner commented Oct 17, 2015

liorbrauer commented Oct 18, 2015

rstudner commented Oct 18, 2015

justin808 commented Oct 18, 2015

justin808 commented Oct 19, 2015

dylangrafmyre commented Oct 19, 2015

gugl commented Oct 19, 2015

alex35mil commented Oct 19, 2015

justin808 commented Oct 19, 2015

justin808 commented Oct 19, 2015

justin808 commented Oct 19, 2015

aaronvb commented Oct 21, 2015

aaronvb commented Oct 21, 2015

justin808 commented Oct 21, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aaronvb commented Oct 21, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

robwise commented Oct 22, 2015

robwise commented Oct 23, 2015