Convert routes into chunkable routes

[declanelcocks]

In response to #128. Just an initial PR as I imagine there could be some things to improve with my logic.

Note: This will still include one main chunk containing all components since we are exporting all components in the index.js file. Still need a way to solve this before the app can be properly chunked.

[codecov-io]

Codecov Report

Merging #129 into fullstack will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           fullstack   #129   +/-   ##
========================================
  Coverage        100%   100%           
========================================
  Files             82     82           
  Lines            802    802           
  Branches         175    175           
========================================
  Hits             802    802

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 710397e...2d396ee. Read the comment docs.

[declanelcocks]

Note that the hot loader is not working due to the way I'm now rendering the app client side, so will have to find a better way to structure the client file.

[diegohaz]

Thank you, @declanelcocks

Will review that this week

[kybarg]

const renderApp = () => {
  match({ history, routes: routes, location }, (error, redirectLocation, renderProps) => {
    render(
      <AppContainer>
        <Provider store={store}>
          <Router key={Math.random()} {...renderProps} />
        </Provider>
      </AppContainer>,
      root,
    )
  })
}

[kybarg]

hot loaded works this way

[diegohaz]

@kybarg Didn't know that. Does it fixes HMR on the *Page components?

[kybarg]

@diegohaz yes, it works

[diegohaz]

Is the match call necessary here? I wonder if placing just key={Math.random()} would not solve HMR?

[kybarg]

@diegohaz haven't tried it. Without key={Math.random()} there is warning about adjusting routes after HMR is called.

[declanelcocks]

@kybarg Thanks 😄 I didn't know you could add a key property to the <Router /> component. I was scratching my head trying to think how to solve this warning about changing routes when HMR is called.

[declanelcocks]

@diegohaz When I don't use the match call, the app will successfully render on the client, but it will throw the above warning in console. The reason I added the match call was to try and see how I can remove this warning to make sure the client/server rendered pages are the same. My understanding of exactly what is happening with the render or match calls is not perfect, so would be great to get some input on that.

[kybarg]

if (module.hot) {
  module.hot.accept('routes', () => {
    renderApp()
  })
}

renderApp()

[kybarg]

This is not the case

[declanelcocks]

Removed this isDev logic now. Since the HMR is fixed it's no longer needed.