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

• npm install -g riko
• npm install -g riko --unsafe-perm=true --allow-root (if permission errors)

Note: If you receive any additional permission errors, be sure to prepend sudo before the command

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

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

• The rikoconfig.js on all platform targets is a function that returns a platform specific config object.

REACT & ELECTRON CONFIG OPTIONS

WEBPACK REQUIRED SETTINGS

Use this function to install your link your webpack details to riko.

setWebpackConfig: () => {
    //return an object with the following keys: 'webpack', 'webpackDevServer', 'webpackConfig'
    // and an optional 'statsOptions' see more here: https://github.com/webpack/docs/wiki/node.js-api#statstostringoptions
    //i.e:
    // {
    //     webpack: require('webpack'),
    //     webpackDevServer: require('webpack-dev-server'),
    //     webpackConfig: require('../webpack.config.babel'),
    //     statsOptions: {}
    // }

    const webpack = require('webpack');
    const webpackDevServer = require('webpack-dev-server');
    const webpackConfig = require('../webpack.config.babel') || require('../webpack.config');

    return { webpack, webpackDevServer, webpackConfig };
}

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

setCustomBoilerplatePath: () => {
    //return a string which is the relative path to your custom boilerplate directory
    //return false to disable custom boilerplate creation
    return 'src/riko-custom-boilerplates';
}

Use this function to inject all of your webpack hook events.

setWebpackEventHooks: (NODE_ENV) => {
    //return an object with the keys as the event names and the values as the event callback functions
    //see here for more details: https://webpack.js.org/api/compiler/#event-hooks

    //i.e:
    // return {
    //     'before-compile': (compilation, callback) => {
    //         // Do something async on the before-compile event...
    //         callback();
    //     }
    // };

    return {};
},

ELECTRON OPTIONS

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

setElectronPackagerOptions: () => {
    //return an object containing electron packager options
    //for Electron Applications Only
    //See API for all options here: https://github.com/electron-userland/electron-packager/blob/master/docs/api.md
    return {
        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
    }
}

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