This is a biolerplate which gathers the latest and more or less stable React-related components in one place to deliver universal SPA concept for real world. Main buzzwords for SEO: react, redux, react-router, react-redux-router – for full list check package.json.
My goal was to create a clear and simple architecture which supports both async Redux actions, client-side routing and server-side rendering and here's brief story that covers the main parts.
Firstly we define routes and containers for them – containers have static method fetchData where you're able to call page-specific async actions to get data from the server on page load (async actions are delivered by isomorphic-fetch, redux-actions and redux-promise). To restore state during server-side rendering we use technique described in react-router-redux SSR example with small adjustment – we go through components tree for this route to execute all fetchData promises – after this promises are resolved and state goes in line with the route we're able to render components on the page with commonly used technique. To call static method fetchData on client side we use history.listen function from react-router-redux – in a callback for history change we use the same match techique to fetch components tree and call async actions from the containers. Simple action calls and state props binding are achieved by classic react-redux connect decorator.
After this brief intro feel free to check the code itself – it most probably describes itself much better.
npm install -g gulp supervisornpm installnpm startin one tab,gulpin the other- go to localhost:3000
This is a very raw but working setup and I want to imporove some things:
- add more meaningful example;
- add proper gulp build script for dev and prod environments;
- move CSS things to JS world.