About

These are some experiments with using React and Relay for both server and client side rendering.

Setup

$ npm install yarn -g
$ yarn install

Then start the development server with:

$ yarn start

To run storybooks:

$ yarn run storybooks

Rather than restart the full server process, which is often done with tools like nodemon, this project only reloads the files in ./app when FS changes occur.
In addition, webpack is configured to dynamically host client sources, meaning that these will also automatically be recompiled when FS changes occur.
Finally, webpack is configured to notify the client of changes to sources which then fetches the updated sources and triggers a re-render of the React components that are on screen.

Take a look at react-native-web, how well it works, and if it would make sharing our components across platforms possible out of the box.

In order for react-hot-loader to be able to reload components and maintain their current state, rather than a page reload, the components have to be exported themselves, not just the Relay wrapper container (more info). E.g.

export class Artist extends React.component {
  ...
}

export default Relay.createContainer(Artist, {
  ...
})