react-isomorphic-boilerplate

react-isomorphic-boilerplate

This boilerplate would help you build a react/redux/react-router isomorphic/universal web app

Feature

• isomorphic: same code runs on server and browser.
• SEO: information benefits to search engine would be rendered on server side.
• fully testable - shows how to test react containers / redux actions and reducers / also your server app.
• easy to start.
• production ready.

Concept

Getting Started

Execute yarn to install.

Run 3 processes to start developing your app:

• yarn run build:client:dev:w: build client side code and watch file change.
• yarn run build:server:dev:w: build server side conde and watch file change.
• yarn start: nodemon executing dist/server.js, and only watches on it's change, --inspect param is given, you can debug nodejs server on chrome-devtools.

then you can visit localhost:3333.

All development code are built with source map.

Log

Import stdout.js and define namespace (example), then turn on debug message depends on platform:

• browser: allow debug log by type localStorage.debug = '*' in console.
• nodejs: run node with DEBUG=*, see package.json.scripts.start.

In production build, server side log would stay untouched to easily debug by checking log file, and on browser side, all debug message would be removed by remove-debug-loader.

Static Files

• Put your fonts, images, etc. in src/assets.
• Fonts: set your font face in src/entries/global.scss and set src points to the font in assets folder.
• Images: set src relative to your js(example) or scss (example) file.

extract-text-webpack-plugin would extract them (font, image) into /dist with hash key and handle url transform. (so you don't have to worry about cache issue)

On the other hand, node server only serves static files in /dist which means /src/assets/ files not imported to your code base are not accessible from your web server.

Style

• reset.css resets default style and is imported in global.scss.
• Import global.scss in your entry component, or define your own styles for specific entry then import them.
• style.scss in containers folder only set styles for react component in the folder of same level, and starts with most root class name of that component. (see src/containers/Home/style.scss)

SEO

• Define loadData method in your route to prefetch data needed for SEO. (example)
• react-helmet help us set head (or specific property) in container and overwrites setting from parent, very handy.
• Define your basic helmet setting in each route file, see src/routers/main.js.  My idea is - basic head meta can be different for different entries of app.
• Overwrites head info in containers. (example)

Test

• AVA as test runner.

• Don't use webpack alias in code base.

• mock-require mocks dependencies to make test as independent as possible.

  As it's name says, it only support require, so in your test file, remember you have to require the target testing module, import does not work.

  Also if your testing module is defined in es6 way (export default), remember to append .default to get the default export. (see server test for example)

Production build

Build your code with:

• yarn run build:client:prod
• yarn run build:server:prod

and your app is ready to go.

LICENSE

MIT