Webpack Build System for React JS Projects (web & electron)
Last updated 3 years ago by donmclean .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install riko-cli -g
SYNC missed versions from official npm registry.


Modern CLI Build System for creating Javascript Projects (Node, React, React Native & Electron)

npm Build Status dependencies Status devDependencies Status Coverage Status Code Climate Known Vulnerabilities license Donate DUB

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


  • yarn global add riko-cli --prefix /usr/local OR npm install -g riko-cli
Note: make sure you export your npm bin to $PATH in bash profile
PATH="$(npm bin -g):$PATH"


Setup a new (highly customizable) project with defaults
  • riko s|setup
    • <project-type> [react, react-native, electron, node-server]
    • <project-name> 'Awesome New Web Project'
    • [-h | --help] 'displays helpful info about current command'
    • example 1: riko setup react Awesome New React Project
    • example 2: riko s electron Amazing New Electron Project
    • example 3: riko s -h
Run a build related task from your project base directory
  • riko r|run
    • <run-command> [react-dev, react-prod, react-server, react-prod-server, react-native-launch-android, react-native-android, react-native-ios, electron-dev, electron-prod, electron-server, node-server-dev, node-server-prod]
    • [-h | --help] 'displays helpful info about current command'
    • example 1: riko run react-dev
    • example 2: riko r electron-prod
    • example 3: riko run --help
Create default and custom boilerplate files to increase developer workflow
  • riko c|create
    • <file-type> [component, componentDir, dummy-component, test-component]
    • <file-name..> Footer
    • [-h | --help] 'displays helpful info about current command'
    • example 1: riko create component Footer
    • example 2: riko c componentDir Header
    • example 3: riko create -h
Help displays helpful instructions on command usage
  • riko -h|--help
    • example 1: riko --help
    • example 2: riko -h
Version displays cli version
  • riko -v|--version
    • example 1: riko --version
    • example 2: riko -v


Supports the development of Node JS, React, React Native & Electron Projects.

React | Electron Projects

- Development Mode: eg: riko run react-dev | riko r electron-dev
- Production Mode: riko run react-prod | riko r electron-prod


  • 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.


  • 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.

    - You must have xcode, a valid iOS simulator, Android Studio, JDK and JRE installed.
    - You must have brew installed.

    - 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.


  • 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.


Port your wish to serve your files on.

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

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

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

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.
    • immutable (Immutable JS instance): useful for applying additional logic when handling the config argument.
  • Returns <undefined>
setWebpackConfigOptions: (env, config, webpack, immutable) => {
    const SomeRandomWebpackPlugin = require('some-random-webpack-plugin');
    //set optional webpack configurations based on environment
    switch (env) {
        case 'global': {
            //This plugin will be available in both development & production builds
            config.set('plugins', [
                new webpack.DefinePlugin({
                    'process.env': {
                        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            //you are able to edit any vaild webpack config option
            configMap.set('devtool', 'source-map');
        case 'production': {
            //These plugins will be available only in production builds
            config.set('plugins', [
                new webpack.optimize.UglifyJsPlugin({
                    mangle: true,
                    sourceMap: true
                new webpack.optimize.CommonsChunkPlugin({
                    name: 'index',
                    filename: 'assets/js/[name].[hash].js'
        case 'development': {
            //This plugin will be available only in development builds
            config.set('plugins', [
               new SomeRandomWebpackPlugin({/*some options*/})
        default: {

For Electron Applications Only. Attach any option to the electronPackagingOptions object. See here.

electronPackagerOptions: {
    name: 'Riko',

    //applications icon  //OS X: .icns  //Windows: .ico
    //get free conversions herehttps://iconverticons.com/online/
    icon: 'src/riko-logo.icns',

    //target platform(s) to build for
    platform: 'all',

    //Enable or disable asar archiving
    asar: true

Set autoprefixing options. See here.

autoprefixerOptions: { 
    //prefix everything
    browsers: ['> 0%'] 

HMR Options. Valid in development mode only.

hotReloadingOptions: {
    //on HMR error a helpful overlay pops up displaying the error message
    //see here: https://webpack.js.org/configuration/dev-server/#devserver-overlay
    overlay: true,
    //Override hot module replacement and simply have the page refresh on file change
    browserSyncReloadOnChange: false,

    //Provide an npm package.json script command here to have tests execute on every webpack rebuild.
    //i.e: 'test' would execute as 'npm run test' or 'hot-test' as 'npm run hot-test'
    //To Disable: change to a falsy value
    hotExecuteTestCommand: 'test',

    //Provide an npm package.json script command here to have flow checks execute on every webpack rebuild.
    //i.e: 'flow' would execute as 'npm run flow' or 'flow-test' as 'npm run flow-test'
    //To Disable: change to a falsy value
    hotExecuteFlowTypeCommand: 'default'

Specific custom boilerplate path for generating path boilerplate files via the riko <create> command. Path must be relative to package.json.

customBoilerplatePath: 'src/riko-custom-boilerplates'


main entry file for your node server

entryFile: 'src/app.js'

Add custom path to your nodemon.json file. See all options here

nodemonJson: 'nodemon.json'

Specific custom boilerplate path for generating path boilerplate files via the riko <create> command. Path must be relative to package.json.

customBoilerplatePath: 'src/riko-custom-boilerplates'

Happy Coding :)

Current Tags

  • 3.1.0                                ...           latest (3 years ago)

32 Versions

  • 3.1.0                                ...           3 years ago
  • 3.0.9                                ...           3 years ago
  • 3.0.5                                ...           3 years ago
  • 3.0.1                                ...           3 years ago
  • 1.0.27                                ...           3 years ago
  • 1.0.26                                ...           3 years ago
  • 1.0.25                                ...           3 years ago
  • 1.0.24                                ...           3 years ago
  • 1.0.23                                ...           3 years ago
  • 1.0.22                                ...           3 years ago
  • 1.0.21                                ...           3 years ago
  • 1.0.20                                ...           3 years ago
  • 1.0.19                                ...           3 years ago
  • 1.0.18                                ...           3 years ago
  • 1.0.17                                ...           3 years ago
  • 1.0.16                                ...           3 years ago
  • 1.0.15                                ...           3 years ago
  • 1.0.14                                ...           3 years ago
  • 1.0.13                                ...           3 years ago
  • 1.0.12                                ...           3 years ago
  • 1.0.11                                ...           3 years ago
  • 1.0.10                                ...           3 years ago
  • 1.0.9                                ...           3 years ago
  • 1.0.8                                ...           3 years ago
  • 1.0.7                                ...           3 years ago
  • 1.0.6                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 2
Dependencies (74)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |