Riko is as much a concept of building as it is build system. It is designed to aid developers throughout the project lifecycle as well as increasing their efficiency.
Learn more about the Riko concept here

CAVEATS

FOUC (Flash of Unstyled Content)

To make the hot reloading of CSS work, we are not extracting CSS in development. Ideally, during server rendering, we will be extracting CSS, and we will get a .css file, and we can use it in the html template. That's what we are doing in production.

In development, after all scripts get loaded, react loads the CSS as BLOBs. That's why there is a second of FOUC in development.

Full support for MAC OS only. Only Partial Support for Windows/Linux/Ubuntu Development.

This Build System is not yet tested for development on Windows, Linux, or Ubuntu and
therefore there are currently unsupported.

USAGE

After running a setup command like: riko setup react myNewProject. cd into your project then run npm install or yarn (highly recommended) if you have yarn installed

After entered your new project directory and installing it's dependencies you can now execute run commands like: riko run react-dev or riko run electron-prod. it all depends on what project you chose when you ran setup.

NOTE: WHEN SETTING UP AN ELECTRON APP ON MAC
- You must have xcode installed.
- You must successfully run sh src/electron.sh to be able to package a windows version of your app.
- If this fails you should complete the following instructions here to package a windows version of your app.

After running one of the setup commands notice there is a new src/ folder in the directory.

here is where all of your source code will live. From js scripts to stylesheets, etc.

RIKO CONFIG

This is where all your build related settings will live. The build system has been created so you rarely have to manage labor intensive build configurations.

All you would need to do is customize your rikoconfig.js file.

REACT & ELECTRON CONFIG OPTIONS

Port your wish to serve your files on.

SERVER_PORT:3000;

WEBPACK REQUIRED SETTINGS

entry:{

index:['./src/js/index.js']

}

output:{

path:path.resolve(cwd,'dist')

}

devtool:'source-map'//set to false to disable default source mapping

WEBPACK OPTIONAL CUSTOM SETTINGS

We can further customize the webpack config with the below function. see docs here.
setWebpackConfigOptions(env, config, webpack, immutable)

Arguments

env (String): environment in which to set config options in.

config (Instance of Immutable JS Map withMutations): contains current state of the webpack config in a mutable Map which allows you to easily set and customize the webpack config. see example below.

webpack (Webpack instance): useful for including this like webpack.optimize.UglifyJsPlugin or logging current configuration, etc.