riko

Webpack Build System for React JS Projects (web & electron)

  • riko

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
riko
14586.3.35 years ago6 years agoMinified + gzip package size for riko in KB

Readme

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

  • 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_**<br/>
    - You must have [xcode](https://developer.apple.com/xcode), a valid [iOS simulator](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html), [Android Studio](https://developer.android.com/studio/index.html), [JDK](http://www.oracle.com/technetwork/java/javase/downloads/index.html) and [JRE](https://java.com/en/download/) installed.<br/>
    - You must have [brew](http://brew.sh/) installed.<br/>

**NOTE: _WHEN SETTING UP AN ELECTRON APP ON MAC_**<br/>
    - You must have [xcode](https://developer.apple.com/xcode) installed.<br/>
    - You must successfully run `sh src/electron.sh` to be able to package a __windows__ version of your app.<br/>
    - If this fails you should complete the following instructions [here](https://www.davidbaumgold.com/tutorials/wine-mac/) 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 :)