kscripts Made with ♥ to Kaios Team

React + Typescript

kscripts is a bundle of scripts to help us be more productive in day by day tasks.

The kscripts sit on top of this technology stack

• Webpack (For generate bundle)
• Typescript
• React
• CSS-modules

Bundle

Bundle in development mode

yarn kscripts dev

Bundle in production mode

yarn kscripts prod

Create a zipped package in release folder

yarn kscripts dev --zip

yarn kscripts prod --zip

Create a Wiki Report on the project wiki/report link

yarn kscripts wiki

Custom Configs

We can customize some configurations in webpack inside kscripts.

We can create a object called kscripts inside your package

In this current version you can customize the follow parts of webpack.

• Copy Webpack Plugin

This array will be merged inside webpack plugin

• You need to use the same syntax of Copy Webpack Plugin .

// package.json
// To copy in another folder on output folder
"kscripts": {
    "copy-webpack-plugin": [
      {
        "from": "src/service-worker.js", "to":"sw"
      }
    ]
  }

  // To copy in output root
"kscripts": {
    "copy-webpack-plugin": [
      {
        "from": "src/service-worker.js"
      }
    ]
  }

  // A more real example
  "kscripts": {
    "copy-webpack-plugin": [
      {
        "from": "src/service-worker.js"
      },
      {
        "from": "src/resources",
        "to": "resources"
      },
      {
        "from": "src/locales",
        "to": "locales"
      },
      {
        "from": "src/manifest.webapp"
      }
    ]
  }

Build Variables

You can use some build variables to automate or change the behavior of your app

Examples:

To Change a server url

// This value will come from webpack bundle mode
const buildEnvironment = process.env.NODE_ENV;
console.log({ buildEnvironment });

// This value will come from --app-env flag in 
// e.g. yarn kscripts dev --app-env cloudStage
const appEnvironment = process.env.APP_ENV;
console.log({ appEnvironment });