node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. 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
  • 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
- 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.

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