node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

riko

RIKO

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

INSTALL

  • npm install -g riko
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

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

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