Relient CLI is a cli wrapper of react-starter-kit. It also provides API mock.

$ npm install relient-cli --save-dev

Make sure you have below project structure:

• mocker/ API mock config
• public/ static public files, for example: robots.txt, favicon.ico
• src/
  • client/ client side code
    • index.js client side entry file
  • server/ server side code
    • index.js server side entry file
  • shared/ code shared with client and server

And add below scripts into package.json:

"scripts": {
	"clean": "relient clean",
	"copy": "relient copy",
	"bundle": "relient bundle",
	"build": "relient build",
	"build-stats": "relient build --analyse",
	"serve": "relient runServer",
	"start": "relient start",
	"mocker": "relient mocker"
}

Then npm run start will give you a working isomorphic web application in dev environment.

Clear build folder.

Copy all files from public folder and yarn.lock to build. If you run with --watch, files will be copy when changed automatically.

Create application bundles (both client and server side) with webpack compilation.

Run clean, copy, bundle in sequence. When you want to release your app to prod, please run this script.

This will show a build stats with BundleAnalyzerPlugin

Start the application in dev enironment.

Run mock server.

Add relient.config.js in the root of your project to config relient. The default config will be:

{
  mockerPort: 9001,
  clientConfigs: [],
  babelPlugins: [],
  proxy: {
    from: ['/api'],
    target: 'http://localhost:9001',
    changeOrigin: true,
  },
  baseUrl: '/admin', // This will be used to webpack public path and browserSync startPath
}

You can add your custom config in relient.config.js to overwrite the default value or add a new config value.

The mock is built based on express. For example, we can create a mocker for account:

mocker/account.js

export default (router) => {
  router.post('/account', ({ body }, response) => {
    response.status(200).send(body);
  });

  router.get('/account/all', (request, response) => {
    response.status(200).send([{ id: 1, name: 'A' }, { id: 2, name: 'B' }]);
  });
}