Modern CLI Build System for creating Javascript Projects (Node, React, React Native & Electron)
MIT License
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
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
PATH="$(npm bin -g):$PATH"
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'
riko setup react Awesome New React Project
riko s electron Amazing New Electron Project
riko s -h
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'
riko run react-dev
riko r electron-prod
riko run --help
riko c|create
<file-type> [component, componentDir, dummy-component, test-component]
<file-name..> Footer
[-h | --help] 'displays helpful info about current command'
riko create component Footer
riko c componentDir Header
riko create -h
riko -h|--help
riko --help
riko -h
riko -v|--version
riko --version
riko -v
Supports the development of Node JS, React, React Native & Electron Projects.
riko run react-dev
| riko r electron-dev
riko run react-prod
| riko r electron-prod
rikoconfig.js
.FOUC (Flash of Unstyled Content)
Full support for MAC OS only. Only Partial Support for Windows/Linux/Ubuntu Development.
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.
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.
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 };
}
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';
}
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 {};
},
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
}
}
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'