Complete example for the blog post Server Side Rendering for React + Apollo GraphQL Client.
On the Ruby side we have a Rails 5.2 app, with Webpacker installed, and customized to support Hypernova. On the JS side, we have a couple React components, one using Apollo GraphQL Client.
# install dependencies
bundle install
yarn install
# boot rails
./bin/rails server
# (optional) boot hypernova for SSR
yarn run hypernovaThere's plenty of Rails + Webpacker boilerplate here, so here's some key places to look for implementation details:
- ./config/initializers/hypernova.rb - Hypernova configuration, including a Rails error logger on failure, which really helps when debugging!
- ./script/hypernova.js - the Hypernova server script, to run in production for SSR, and optionally in development for testing SSR (though Hypernova will fall back to just client side rendering just fine)
- ./config/webpack/server.js - a new Webpacker environment for outputting Hypernova compatible JS.
- ./config/webpack/{development,production}.js - slightly changed from default scaffolding to also build server.js
- ./app/javascript/packs/hypernova-server.js - the Hypernova server entry point, all SSR components must be registered in this (as well as application.js for client rendering too)
- ./app/javascript/hypernovaApolloRenderer.js - customized component renderer, extending the hypernova-react package's source to also include react-apollo data pre-fetching
- ./app/javascript/containers/withApollo.js - HOC providing to the client a self-rehydrating Apollo Client Provider