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

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

INSTALL

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

COMMANDS

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

FEATURES

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

React | Electron Projects

• Supports compilation of es6 js & jsx source files via babel.
• Supports compilation of pug template files to html.
• Supports preprocessing of sass, less and stylus stylesheets.
• Supports generation of Source mapping for stylesheets and js sources.
• Supports Flow Static Type Checking out of the box.
• Supports Yarn. The new fast, reliable and secure dependency management tool.
• Javascript (js,jsx) linting via eslint.
• Stylesheet (sass, less, css) linting via stylelint.
• Autoprefixing for stylesheets.
• Browsersync functionality by default.
• Jest, Mocha, Chai unit testing.
• Selenium Testing via Nightwatch JS & Browserstack

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

• Hot Module Replacement for stylesheets (sass,css,less) and js (js,jsx) sources.
• Error proofing (on error a helpful overlay pops up displaying the error).
• Remote Debugging: Debug your application on almost any device.
• Electron Mode has the exact same features as React setup with electron native OS powers.

- Production Mode: riko run react-prod | riko r electron-prod

• Tree Shaking: Since Riko uses Webpack 2 to bundle React & Electron projects, it automatically removes unused code to achieve the smallest bundle sizes.
• Electron Packager: Bundles your electron app with your specified options via rikoconfig.js.

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 A MOBILE (REACT NATIVE) APP ON MAC - You must have xcode, a valid iOS simulator, Android Studio, JDK and JRE installed. - You must have brew installed.

  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.
  • 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');
            break;
        }
        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'
                })
            ]);
            break;
        }
        case 'development': {
            //This plugin will be available only in development builds
            config.set('plugins', [
               new SomeRandomWebpackPlugin({/*some options*/})
            ]);
            break;
        }
        default: {
            break;
        }
    }
}

ELECTRON OPTIONS

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'

NODE SERVER CONFIG OPTIONS

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 :)