hung-phan/generator-rails-react-webpack

Integrate Ruby on Rails with React.js and Webpack

generator-rails-react-webpack's Issues

Migrate to rails 5

Optimize bootstrap column generator

I see your bootstrap column generator here and do something similar on many of my projects:

@mixin bootstrap-column($name, $percent-width) {
  $grid-width: $grid-columns * $percent-width / 100;

  .col-lg-#{name} { @include make-lg-column($grid-width); }
  .col-md-#{name} { @include make-md-column($grid-width); }
  .col-sm-#{name} { @include make-sm-column($grid-width); }
  .col-xs-#{name} { @include make-xs-column($grid-width); }
}

This has a few advantages:

• It's shorter. 😃
• It's works The Bootstrap Way, meaning it takes advantage of Bootstrap's variables and mixins, so that if a user overrides some variables involved in grid building, this will still work as expected.
• It's much more future-proof, as future changes to the Bootstrap grid would likely only update the internal workings of their make-SIZE-column mixin.

Gulp-LiveReload x Guard

Hi,

Have you ever considered using Gulp in this Workflow? Is there any obvious reason why you wouldn't?

Some libraries are deprecated

Hi Hung,

Yesterday, I used your generator for integrating react-js to my project. But I got these errors with Ruby 2.2.3 and Rails 4.2.4, and it didn't work any more:

$ npm install -g generator-rails-react-webpack
npm WARN peerDependencies The peer dependency yo@>=1.0.0 included from generator-rails-react-webpack will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN deprecated [email protected]: the module is now available as 'css-select'
npm WARN deprecated [email protected]: the module is now available as 'css-what'
[email protected] /usr/local/lib/node_modules/generator-rails-react-webpack
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

ERROR in ./~/react-router/lib/components/Route.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib/components
 @ ./~/react-router/lib/components/Route.js 12:16-46

ERROR in ./~/react-router/lib/locations/StaticLocation.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib/locations
 @ ./~/react-router/lib/locations/StaticLocation.js 7:16-46

ERROR in ./~/react-router/lib/locations/TestLocation.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib/locations
 @ ./~/react-router/lib/locations/TestLocation.js 7:16-46

ERROR in ./~/react-router/lib/History.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/History.js 3:16-46

ERROR in ./~/react-router/lib/History.js
Module not found: Error: Cannot resolve module 'react/lib/ExecutionEnvironment' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/History.js 4:16-57

ERROR in ./~/react-router/lib/Route.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/Route.js 8:16-46

ERROR in ./~/react-router/lib/Route.js
Module not found: Error: Cannot resolve module 'react/lib/warning' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/Route.js 9:14-42

ERROR in ./~/react-router/lib/createRoutesFromReactChildren.js
Module not found: Error: Cannot resolve module 'react/lib/warning' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/createRoutesFromReactChildren.js 6:14-42

ERROR in ./~/react-router/lib/createRouter.js
Module not found: Error: Cannot resolve module 'react/lib/warning' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/createRouter.js 5:14-42

ERROR in ./~/react-router/lib/createRouter.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/createRouter.js 6:16-46

ERROR in ./~/react-router/lib/createRouter.js
Module not found: Error: Cannot resolve module 'react/lib/ExecutionEnvironment' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/createRouter.js 7:16-57

ERROR in ./~/react-router/lib/ScrollHistory.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/ScrollHistory.js 3:16-46

ERROR in ./~/react-router/lib/ScrollHistory.js
Module not found: Error: Cannot resolve module 'react/lib/ExecutionEnvironment' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/ScrollHistory.js 4:16-57

ERROR in ./~/react-router/lib/PathUtils.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/PathUtils.js 3:16-46

ERROR in ./~/react-router/lib/getWindowScrollPosition.js
Module not found: Error: Cannot resolve module 'react/lib/invariant' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/getWindowScrollPosition.js 3:16-46

ERROR in ./~/react-router/lib/getWindowScrollPosition.js
Module not found: Error: Cannot resolve module 'react/lib/ExecutionEnvironment' in /Users/nobi/projects/personal/abc-ror/node_modules/react-router/lib
 @ ./~/react-router/lib/getWindowScrollPosition.js 4:16-57

Server-side Rendering

I was wondering whether or not this project uses the benefits of the server-side rendering of React. I used yo rails-react-webpack in an existing project, but on development I couldn't really see the server-side rendering happening.

By the documentation on the page I couldn't really find whether or not it actually makes use of the server-side rendering feature. If it should work on development, then it might be an issue on my side.

server side render does not work

Although the gemfile contains react-rails, when one tries to server side render with

render component: 'Dashboard', props: { key: auth_hash['credentials'] }

The following error appears

Encountered error "ReferenceError: Dashboard is not defined" when prerendering Dashboard with {"key":
....

Update to react 15, and optimize built script for webpack

Yeoman generator failure

Installing looks for a Gemfile in the top level?

$ yo
? 'Allo Charles! What would you like to do? Rails React Webpack

Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo rails-react-webpack

? What css library would you like to include? Animate SCSS, Bootstrap font-awesome
? What tool support would you like to include? Grape Rest, therubyracer, Livereload
? What js library would you like to include? Lodash.js, REST superagent by visionmedia, Modernizr
Processing Gemfile
identical tmp/yeoman/Gemfile

     _-----_
    |       |    .----------------------.
    |--(o)--|    |     Bye from us!     |
   `---------´   |      Chat soon.      |
    ( _´U`_ )    |      Yeoman team     |
    /___A___\    |   http://yeoman.io   |
     |  ~  |     '----------------------'
   __'.___.'__
 ´   `  |° ´ Y `

fs.js:565
fs.write = function(fd, buffer, offset, length, position, callback) {
                                                 ^
Error: ENOENT, no such file or directory '/Users/charlesmerriam/p/react-tut2/Gemfile'
    at Error (native)
    at Object.fs.openSync (fs.js:500:18)
    at Object.fs.readFileSync (fs.js:352:15)
    at readFileAsString (/usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/yeoman-generator/lib/actions/wiring.js:275:13)
    at module.exports.yeoman.generators.Base.extend.gemfile (/usr/local/lib/node_modules/generator-rails-react-webpack/app/index.js:105:23)
    at /usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/yeoman-generator/lib/base.js:341:43
    at /usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/yeoman-generator/node_modules/async/lib/async.js:551:21
    at /usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/yeoman-generator/node_modules/async/lib/async.js:227:13
    at iterate (/usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/yeoman-generator/node_modules/async/lib/async.js:134:13)
    at /usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/yeoman-generator/node_modules/async/lib/async.js:145:25

Problem with initiate the generator

Have some issue when initiate YO generator:

An error occurred while installing did_you_mean (1.0.0), and Bundler cannot
continue.
Make sure that gem install did_you_mean -v '1.0.0' succeeds before bundling.
Processing Bowerfile
/Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/resolver.rb:354:in block in verify_gemfile_dependencies_are_found!': Could not find gem 'bootstrap-sass' in any of the gem sources listed in your Gemfile or available on this machine. (Bundler::GemNotFound) from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/resolver.rb:330:ineach'
from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/resolver.rb:330:in verify_gemfile_dependencies_are_found!' from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/resolver.rb:199:instart'
from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/resolver.rb:183:in resolve' from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/definition.rb:198:inresolve'
from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/definition.rb:137:in specs' from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/definition.rb:182:inspecs_for'
from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/definition.rb:171:in requested_specs' from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/environment.rb:18:inrequested_specs'
from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/runtime.rb:13:in setup' from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler.rb:92:insetup'
from /Users/denys/.rvm/gems/ruby-2.2.1/gems/bundler-1.11.2/lib/bundler/setup.rb:18:in <top (required)>' from /Users/denys/.rvm/rubies/ruby-2.2.1/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:128:inrequire'
from /Users/denys/.rvm/rubies/ruby-2.2.1/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:128:in rescue in require' from /Users/denys/.rvm/rubies/ruby-2.2.1/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:39:inrequire'
from /Users/denys/Desktop/dev/app-name/config/boot.rb:3:in <top (required)>' from bin/rails:3:inrequire_relative'
from bin/rails:3:in `

'
identical tmp/yeoman/Bowerfile
fs.js:549
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
Error: ENOENT: no such file or directory, open '/Users/denys/Desktop/dev/app-name/Bowerfile'
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at readFileAsString (/usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/yeoman-generator/lib/actions/wiring.js:275:13)
at module.exports.yeoman.generators.Base.extend.bower (/usr/local/lib/node_modules/generator-rails-react-webpack/app/index.js:135:23)
at /usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/yeoman-generator/lib/base.js:341:43
at /usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/async/lib/async.js:551:21
at /usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/async/lib/async.js:227:13
at iterate (/usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/async/lib/async.js:134:13)
at /usr/local/lib/node_modules/generator-rails-react-webpack/node_modules/async/lib/async.js:145:25

gulp javascript:dev -> Cannot call method 'match' of undefined

I tried your already generated project but I get this error

ERROR in ./app/frontend/javascripts/main.js
Module build failed: TypeError: /Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/react-hot-loader/index.js!/Users/grigio/+persistant/Code/testing/rails-react-webpack/app/frontend/javascripts/main.js: Cannot call method 'match' of undefined
    at urlParse (/Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/node_modules/source-map/lib/source-map/util.js:37:22)
    at normalize (/Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/node_modules/source-map/lib/source-map/util.js:86:15)
    at Array.map (native)
    at SourceMapConsumer.BasicSourceMapConsumer (/Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/node_modules/source-map/lib/source-map/source-map-consumer.js:287:23)
    at new SourceMapConsumer (/Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/node_modules/source-map/lib/source-map/source-map-consumer.js:25:9)
    at File.mergeSourceMap (/Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/lib/babel/transformation/file/index.js:500:31)
    at File.generate (/Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/lib/babel/transformation/file/index.js:732:25)
    at File.transform (/Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/lib/babel/transformation/file/index.js:594:17)
    at /Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/lib/babel/transformation/transformer-pipeline.js:100:19
    at File.wrap (/Users/grigio/+persistant/Code/testing/rails-react-webpack/node_modules/babel-core/lib/babel/transformation/file/index.js:604:16)
 @ multi main
[11:50:27] Finished 'javascript:dev' after 2.62 s

Update to babel 6 and support css-modules

I have plan to update this to babel 6 and support css-modules for rails app, also to include enzyme testing for this generator