Skip to main content

Tips

  • Make sure to run the Rails app using bin/dev (or foreman start -f Procfile.dev) and not rails s so development watchers are running. For tests, use one consistent strategy: either React on Rails TestHelper + build_test_command (recommended) or compile: true in config/shakapacker.yml (not both). Keep test and development public_output_path values separate so manifests do not collide. If you run tests frequently while developing, run bin/dev test-watch in a separate terminal for faster feedback (auto mode chooses full vs client-only). Advanced only: if you intentionally use bin/dev static, you can share dev/test output paths, but do not do that in HMR mode.

  • The default for rendering right now is prerender: false. NOTE: Server-side rendering does not work for some components that use an async setup for server rendering. You can configure the default for prerender in your config.

  • You can expose either a React component or a function that returns a React component. If you wish to create a React component via a function, rather than simply props, then you need to set the property "generator" on that helper invocation to true (or change the defaults). When that is done, the function is invoked with a single parameter of "props", and that function should return a React element.

  • Be sure you can first render your React component on the client side only before you try to debug server rendering!

  • Open up the HTML source and take a look at the generated HTML and the JavaScript to see what's going on under the covers. Note that when server rendering is turned on, then you'll see the server-rendered React components. When server rendering is turned off, then you'll only see the div element where the in-line JavaScript will render the component. You might also notice how the props you pass (a Ruby Hash) becomes in-line JavaScript on the HTML page.