Workaround temporarily in only client rendering desired:

create an empty file in Rails project app/assets/javascripts/generated/server.js.

Howdy,

Do you plan on having an opinion on how to setup Javascript testing and what framework to use?

See:
shakacode/react-webpack-rails-tutorial#73 (comment)

We could provide a something helpful in this gem that facilitates true promises via 'fetch'.

Use a connection pool for the js engine:

See options here: https://github.com/reactjs/react-rails#server-rendering

Here's the implementation:
https://github.com/reactjs/react-rails/blob/master/lib/react/server_rendering.rb

In the case where users have multiple engines in their routes file, the built-in Rails generator helper, route, will add the route to all of the engines. It should only be appending the route once.

I believe this is due to the helper's reliance on gsub and their use of routes.draw do instead of Rails.application.routes.draw do, since the former will result in false positives.

Relevant links:

• Rails route helper API
• Rails route helper source code I've linked directly to what I believe is the line, the definition of sentinel which uses a regex that is too loose
• Thor inject_into_file API (used by the route_helper)
• Thor inject_into_file source

@dylangrafmyre @robwise Let's tune up Coveralls https://coveralls.io/github/shakacode/react_on_rails

1. I can't find react_on_rails_helper.rb listed in the coverage.
2. The coverage of some of the other files is a bit dubious. It seems that initialization of the gem is not getting flagged as covered.

Simple change to gem:

1. Change docs to expose ReactDom like this:
   // React is necessary for the client rendering:
   {test: require.resolve('react'), loader: 'expose?React'},
2. Add function to resolve correct "React" object:

Here's where we refer to React right now.

https://github.com/shakacode/react_on_rails/blob/master/app/assets/javascripts/react_on_rails.js#L21
https://github.com/shakacode/react_on_rails/blob/master/app/assets/javascripts/react_on_rails.js#L43

Ideally, have some sort of way to test this.

Need to adjust docs.

1. I curious as to the purpose of eval vs. compile methods in the execJS?
2. Any advice on what's going the be best performance for rendering react components server side?
3. Here's how another project is doing this without webpack: https://github.com/reactjs/react-rails/tree/master/lib/react/server_rendering Anything right or wrong about what they are doing? Here's the docs on that: https://github.com/reactjs/react-rails#server-rendering
   Here's a discussion on performance: reactjs/react-rails#290

Summary of performance advice from react-rails:

Recommends: https://github.com/cowboyd/therubyracer

On MRI, use therubyracer for the best performance (see discussion)
On MRI, you'll get a deadlock with pool_size > 1
If you're using JRuby, you can increase pool_size to have real multi-threaded rendering.

Every time I setup react_on_rails on my machine with the generators, the npm-shrinkwrap file breaks my setup.

I cd into client, run npm install successfully. Then I cd up to the root and run foreman start -f Procfile.dev. Then it gives me an error involving the 'body-parser' module.

I solve this by deleting the npm-shrinkwrap file and re running npm install in the client directory.

When the user is not using server rendering and has forgotten to set config.server_bundle_js_file equal to empty quotes ("") inside of the app/config/initializers/react_on_rails.rb file, it is supposed to be logging an error. However, I'm not seeing this error.

Relevant line of code: https://github.com/shakacode/react_on_rails/blob/master/lib/react_on_rails/server_rendering_pool.rb#L84

We need to investigate what is going on here.

In addition, it would be nice to have the error also output to the console.

Right now, you have to expose a function

(props) => <MyComponent {...props}/>

instead of just MyComponent, as is done in the react-rails gem.

We'll soon support both ways.

Nice work on the 1.0 release guys. Really appreaciate the work you guys have done to make running React and Rails easier.

We're currently running into an issue with the generator where it gives the following config option but it doesn't appear to be defined anywhere.

config.reload_server_js_every_request = Rails.env.development?

Should this be the following instead?

config.development_mode = Rails.env.development?

We can use the techniques in this article: http://clarkdave.net/2015/01/how-to-use-webpack-with-rails/ to potentially simplify the setup. The main addition from that article is a way to avoid duplicating the manifest of webpack files in application.js.

There's some other useful tips in that article as well.
CC: @alexfedoseev @samnang @dylangrafmyre

When I installed it and tried to run foreman it told me that package.json had a trailing comma. Sure enough when I looked it had one on line 32.

    "build:server": "NODE_ENV=production webpack --config webpack.server.rails.config.js",
    "build:dev:client": "webpack -w --config webpack.client.rails.config.js",
    "build:dev:server": "webpack -w --config webpack.server.rails.config.js", // Right here
  },
  "dependencies": {
    "babel-core": "^5.8.25",

The idea is to have a Rakefile script that runs through the generator with differing options, putting each result into an examples folder. We would then implement a hidden dev_tests (or whatever we want to call it) generator that the script makes sure to always pass. A hidden generator is one that is not visible to the public but is nonetheless able to be invoked if you know the command.

This generator will create general sanity tests to ensure various essential functionalities of each result application is working correctly. We could ensure that our CI environment re-generates these results and runs these tests, thereby preventing a scenario where we pull something that breaks the generator apps.

Whether or not we include the examples directory in source control I guess is optional, but I'd be worried that they would sometimes be stale since they would rely on the user making sure to re-generate of their changes.

• create Rakefile script to generate apps into examples folder
• ensure that Coveralls, the various linters (actually, we could keep the JS linters), are set up to ignore it
• create hidden dev_test_generator
• have generator results script use this option when generating the apps
• have Rakefile include generated app tests when running test suite
• move spec/dummy tests to the dev_test_generator and delete dummy apps (optional because this wouldn't work as far as ensuring React v13 compatibility)
• ensure our CI environment handles all of this appropriately
• refactor so that we do not unnecessarily rebuild the app, re-run bundle install, or re-run npm install when we don't need to do so
• incorporate the ability to generate the apps in a separate location and push them to a given GitHub (basically the generator results functionality)

@dylangrafmyre @justin808 @samnang

React Router works with server rendering (after #68 will be merged). But we need to handle 2 more cases:

1. Errors from router. We should send 500 in case of the error.
2. Redirects from router. We should send 302 in case of the redirect.

Details: shakacode/react-webpack-rails-tutorial#128
Code where error / redirect info goes to the gem on server: https://github.com/shakacode/react-webpack-rails-tutorial/blob/alex/react-router/client/app/startup/ServerApp.jsx#L11

We're working on a fix for this.

What happens is that the generated/server.js gets loaded once at startup, regardless of development or production mode.

For development, we'll reload server.js if the timestamp has changed.

Production mode will not check.

@jbhatab and @robwise are working on this.

There's too much duplication between:

dummy/client/app/startup/clientApp.jsx and dummy/client/app/startup/serverApp.jsx

We also need some good documentation on how to set this up.

The code right now in the react_on_rails gem looks horrible due to trying to preserve the correct white space. Here's the generated code:

• https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/server-generated.js
• https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/client-generated.js

And here's the files that generate it:

• https://github.com/shakacode/react_on_rails/blob/master/app/helpers/react_on_rails_helper.rb
• https://github.com/shakacode/react_on_rails/blob/master/lib/react_on_rails/react_renderer.rb

@samnang @alexfedoseev @mapreal19 @josiasds Any ideas on how best to refactor this?

BTW -- be super careful before accepting any commits that might mess with this formatting.

@Johnnycus Let's write a unit test that verifies that the generated JS stays the same, and that will enable us to do some refactoring.

Lots of work do here.

Turns out there is some work going on here regarding hot reloading on the rails side: https://github.com/rmosolgo/react-rails-hot-loader

It would be interesting if this could be made to work with the webpack setup.

While not a high priority, it's worth saving the idea.

Not really sure what's going on here. It looks like the component's props are populated correctly, but I get these server side errors.

Is server side rendering turned on by default? I didn't think it was.

If the user is not using the server-rendering feature, are therubyracer and execjs still needed? I have tried generating a fresh non-server-rendering app, commenting out therubyracer dependency, and bundle installing again. I was able to run the app with no errors. Perhaps we can explore removing these dependencies from the non-server-rendering generators.

However, even though we may not be executing the code, it nonetheless is still referring to the gem, so it seems a little strange that this actually works.

This file is critical to deploying with webpack:

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/lib%2Ftasks%2Fassets.rake

Should we put this in the gem?

@samnang?

Right now, the default for pre-rendering is true.

If any component makes an async call, this will fail.

Client rendering (prerender: false) should always work.

Should the default be false? and then let people turn on pre-rendering?

Location of server webpack generated file, and default for prerender.

@dylangrafmyre Can you set this up. Same setup as https://github.com/justin808/react-webpack-rails-tutorial/.

Currently the generator is looking to append Sass imports into the app/assets/stylesheets/application.css file (which it renames to application.css.scss) or an application/assets/stylesheets/application.css.scss, but it doesn't look for simply application.scss and therefore throws an error.

This is extracted from: #78 (comment)

Spec tests for the helper.

We currently have our application split up into multiple smaller applications so don't use the main application.js file. It would nice if the generator allowed you to specify the name of the manifest file e.g.

rails generate react_on_rails:install -m my_cool_app

• Change JS code (maybe in the helper) so that it renders on event page loaded or page change
• Reenable turbolinks so that big JS file only loaded once.

<!-- props should be set in the controller -->
<% props = { helloWorldData: { name: "Prop from Rails!" } } %>

<!--TODO MOVE THIS to one helper method react_component("App", props) -->
<!-- This sets the props for the client side app -->
<!-- Get the id tag by taking lower case version of component name -->
<!-- Offer option to put in props -->
<%= javascript_tag "window.__DATA_FROM_RAILS__ = #{props.to_json};" %>
<div id="app"><%= react_component("App", props) %></div>

spec/dummy/app/views/layouts/application.html.erb:16

<!DOCTYPE html>
<html>
<head>
  <title>Dummy</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <!-- TODO PUT THIS BACK!!!!-->
   <!--javascript_include_tag 'application', 'data-turbolinks-track' => true -->
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>
<!-- TODO: Move back to inside HEAD section. Address loading document ready (page loaded
           considering the use of turbolinks.
-->
<%= javascript_include_tag 'application' %>

</body>
</html>

We need to do like this from the react-rails gem.

Also, we could allow the user to set an id in the content tag, and that should replace the generated one. Also, support passing props as a string, or a hsh.

We need:

• Provide examples in the views/pages directory and links in the _header.html.erb
• tests for this, both at the unit level and at the integration test level.
• Update the docs
• Small change, don't try to call props.to_json if props is already a string, here.

From the https://github.com/reactjs/react-rails/. We should make the API as similar as possible.

https://github.com/reactjs/react-rails/blob/master/README.md

• component_class_name is a string which names a globally-accessible component class. It may have dots (eg, "MyApp.Header.MenuItem").
• props is either an object that responds to #to_json or an already-stringified JSON object (eg, made with Jbuilder, see note below).
• html_options may include:
  • tag: to use an element other than a div to embed data-react-class and -props.
  • prerender: true to render the component on the server.
  • **other Any other arguments (eg class:, id:) are passed through to content_tag.

https://github.com/reactjs/react-rails/blob/master/lib/react/rails/component_mount.rb

      # Render a UJS-type HTML tag annotated with data attributes, which
      # are used by react_ujs to actually instantiate the React component
      # on the client.
      def react_component(name, props = {}, options = {}, &block)
        options = {:tag => options} if options.is_a?(Symbol)

        prerender_options = options[:prerender]
        if prerender_options
          block = Proc.new{ concat React::ServerRendering.render(name, props, prerender_options) }
        end

        html_options = options.reverse_merge(:data => {})
        html_options[:data].tap do |data|
          data[:react_class] = name
          data[:react_props] = (props.is_a?(String) ? props : props.to_json)
        end
        html_tag = html_options[:tag] || :div

        # remove internally used properties so they aren't rendered to DOM
        html_options.except!(:tag, :prerender)

        content_tag(html_tag, '', html_options, &block)
      end
    end

Hello,

I was wondering if there is a reason that is preventing the gem from supporting Rails version 3.2.xx?

Thank you,
Lior

1. Check if trace is turned on
2. Add a message to the console that comes from the server messages:

Before line: https://github.com/shakacode/react_on_rails/blob/master/lib/react_on_rails/react_renderer.rb#L52

      js_code_wrapper = <<-JS
  (function () {
    var result = '';
#{ReactOnRails::ReactRenderer.wrap_code_with_exception_handler(result_js_code, component_name)}
#{after_render}
    return result;
  })()
      JS

Using this history.console (https://github.com/shakacode/react_on_rails/blob/master/lib/react_on_rails/react_renderer.rb#L21)

    CONSOLE_REPLAY = <<-JS
    var history = console.history;
    if (history && history.length > 0) {
      result += '\\n<script>';
      history.forEach(function (msg) {
        result += '\\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
      });
      result += '\\n</script>';
    }

Rather than:

<%= react_component('App', {}, prerender: false) %>

we'd like to simply do:

<%= react_component('App', prerender: false) %>

Or maybe if prerender is defaulting to false, this already works:

<%= react_component('App') %>

So maybe then we don't need to do anything here...

FYI -- the messages you get from react_on_rails when you open up the failed test from Capybara are not relevant generally, because the application.js is not loaded, so then you get other messages.

We need to put this information in a wiki, but it's not clear how to add images to a github wiki right now, so this is just a placeholder.

List of Features to add to the Generator

• Install instructions should suggest running bundle after running the generator b/c of linters
• Important post generate messages should go to the bottom

** nvm is advised. Please consider installing it. https://github.com/creationix/nvm
** Need to run bundle and npm i 

This will make debugging easier.

If only the JS code change, then the cache will not be invalidated. Possible solutions to the problem include:

1. Always invalidate the whole cache on pushes. Trivial.
2. Only invalidate the React server rendering caches on pushes. This can be done by including the git deployment sha string in the cache key. Very easy.
3. Manually add a string to the cache key indicating a version and update that key when this needs to change. This is easy, but it can be error prone.
4. Have the view helper render_component support caching of components and be able to resolve dependencies. This is relatively more difficult as it involves determining a dependency tree of what went into the component.

This is how Rails does it for views.
https://github.com/rails/cache_digests/tree/master/lib/cache_digests

These should be capybara tests against spec/dummy.

Be sure to test following configurations:

1. Turbolinks on/off
2. Fragment caching on/off

As we discussed a few days ago, there is an issue with serialization of props, exposed on the client. Since these props may contain user's input and they will be exposed as javascript variable in the browser, we must escape it to prevent harmful script injection.

Here is the lib that I'm using in Node environment to serialize javascript before it will be exposed on the client: https://github.com/yahoo/serialize-javascript/

We should implement escaping of JS the same way, but on the Ruby side.

/cc: @justin808 @samnang

When including application.js at bottom of body like this:

<body>
 <!-- some other stuff here (layouts/application.html.erb) -->
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true, 'data-turbolinks-eval' => false %>
</body>

and using react_component helper to render a component in a view (i.e.: /admin/purchases/new)

<%= react_component("PurchaseForm", {}, prerender: false, trace: true, generator_function: false) %>

I get a Uncaught ReferenceError: ReactOnRails is not defined. Obviously this is because the Javascript written by the helper is executed when the DOM is loading, and before the application.js is included.

In order to avoid the error what I've done is the following:

<body>
  <!-- some other stuff here (layouts/application.html.erb) -->
  <div id="reactRoot"></div>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true, 'data-turbolinks-eval' => false %>
  <%= content_for :react_components %>
</body>

and in the view:

<% content_for(:react_components) do
    concat react_component("ClientApp", {}, id: 'reactRoot', prerender: false, trace: true, generator_function: false)
  end %>

I just wanted to share my experience using this gem... Is there any better approach for this? If not maybe you'd like to include this strategy in the README.

My existing Rails application is using Foundation instead of Bootstrap. I am wondering if Bootstrap can be an option in generator, if so, that'd be great.

This prints now. Easy to make this look better.

//<![CDATA[
      (function() {
        window.__helloWorldData0__ = {"helloWorldData":{"name":"Mr. Server Side Rendering"}};
              var renderIfDomNodePresent = function() {
        var domNode = document.getElementById('HelloWorld-react-component-0');
        if (domNode) {
          console.log("CLIENT SIDE RENDERED HelloWorld with data_variable __helloWorldData0__ to dom node with id: HelloWorld-react-component-0");

          var reactElement = (function(React) {
  var props = __helloWorldData0__;
  return React.createElement(HelloWorld, props);
})(this.React);
;
          React.render(reactElement, domNode);
        }
      }

              var turbolinksInstalled = typeof(Turbolinks) !== 'undefined';
      if (!turbolinksInstalled) {
        console.warn("WARNING: NO TurboLinks detected in JS, but it's in your Gemfile");
        document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOMContentLoaded event fired");
  renderIfDomNodePresent();
});

      } else {
        function onPageChange(event) {
          var removePageChangeListener = function() {
            document.removeEventListener("page:change", onPageChange);
            document.removeEventListener("page:before-unload", removePageChangeListener);
            var domNode = document.getElementById('HelloWorld-react-component-0');
            React.unmountComponentAtNode(domNode);
          };
          document.addEventListener("page:before-unload", removePageChangeListener);

          renderIfDomNodePresent();
        }
        document.addEventListener("page:change", onPageChange);
      }

      })();

//]]>

This code in: https://github.com/shakacode/react_on_rails/blob/master/lib/react_on_rails/react_renderer.rb#L103

needs to take an option so what we use on the server and client side is different.

We're printing server side for client side messages!

console.error('SERVER SIDE: Exception in server side rendering!');
      if (e.fileName) {
        console.error('SERVER SIDE: location: ' + e.fileName + ':' + e.lineNumber);
      }
      console.error('SERVER SIDE: message: ' + e.message);
      console.error('SERVER SIDE: stack: ' + e.stack);
      msg += 'SERVER SIDE Exception in rendering!\\n' +
        (e.fileName ? '\\nlocation: ' + e.fileName + ':' + e.lineNumber : '') +
        '\\nMessage: ' + e.message + '\\n\\n' + e.stack;

It's too easy to start rails using rails s and not have the JS code update. It should be fine just run rails s in development mode. We also need to make sure that the js code is updated before rspec starts.

We need to fork webpack watch processes to compile the bundle JS files when needed.

Basically, this means taking what's in the forman file:

server: sh -c 'cd client && $(npm bin)/webpack -w --config webpack.server.js'
client: sh -c 'cd client && $(npm bin)/webpack -w --config webpack.client.js'
web: bin/rails s

And having this simply work by running rails s

The requirements would be:

1. All stdout and stderr from the webpack commands goes to stdout for the rails server.
2. The webpack processes quit when the rails server quits, and preferably even if the the rails server is killed with a -9.

This article on StackOverflow suggests we should use Ruby "fork"

• Fork: http://ruby-doc.org/core-2.2.3/Process.html#method-c-fork

Other options:

• Spawn
• Daemon
  Process.daemon true, true to keep std out and current directory.

Other references

• Ruby for Admins: Background Jobs
• Unix Processes in Ruby

CC: @samnang @alexfedoseev @dylangrafmyre @jbhatab

Completed:

• Support for both React 0.13 and 0.14
• Port console polyfill from react-rails #8
• Make work with turbolinks
• Modify render_component helper to put JSON data javascript
  adjacent to react component.
• Move over the javascript/webpack/node stuff to this repo
• Create a PR on the https://github.com/shakacode/react-webpack-rails-tutorial that is the simplest thing, which is just including the gem but no server rendering.
• Lots of options to add later to allow customization
• Add linting and CI scripts
• Support both an api of a function that takes props or a react component #11
• Make the name of the 'generated/server.js' configurable #9
• Port other js engine options from react-rails #28
• Create a second PR (or just new branch) based on the last commit (if not merged to master) that shows the change to make this enabled for server rendering.
• Change the default of prerender to false, because it takes extra care to create a react component that can prerender. Make this configurable so the config file #12
• XSS vulnerability: serialization of props, exposed on the client, #47
• Add integration test, #45
• Lots of docs on the webpack setup
• If no generated/server.js exists, then do not include the file, #14

See:
http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup

If the head script includes "defer" in the application.js (which it should!), then we need to include defer in the body scripts!

CC: @robwise @mapreal19 @josiasds @alexfedoseev @dylangrafmyre @samnang @rstudner

Due to issue
#12

Maybe the gem should be called react_rails_webpack since server rendering is optional.