kkt
    TypeScript icon, indicating that this package has built-in type declarations

    6.11.0 • Public • Published

    KKT LOGO

    Build KKT & Example Github issues Github Forks Github Stars Github Releases npm version

    Create React apps with no build configuration, Cli tool for creating react apps. Another tool, kkt-ssr, Is a lightweight framework for static and server-rendered applications.

    As of KKT 6.x this repo is "lightly" maintained mostly by the community at this point.

    Features:

    • The code was rewritten using TypeScript.
    • ♻️ Recompile the code when project files get added, removed or modified.
    • 📚 Readable source code that encourages learning and contribution
    • ⚛️ Override create-react-app webpack configs without ejecting
    • 💝 Expose the configuration file entry and support webpack configuration.
    • 🚀 Supports creat-kkt to create different instances.
    • Jest test runner setup with defaults kkt test

    Usage

    You will need Node.js installed on your system.

    npm install kkt

    Open in CodeSandbox

    Open in CodeSandbox

    Example

    Initialize the project from one of the examples, Let's quickly create a react application:

    $ npx create-kkt my-app -e uiw
    # or npm
    $ npm create kkt my-app -e `<Example Name>`
    # or yarn 
    $ yarn create kkt my-app -e `<Example Name>`

    You can download the following examples directly. Download page.

    How to rewire your create-react-app project

    Create your app using create-react-app and then rewire it.

    npm install kkt --save-dev
    "dependencies": {
      ...
    -  "react-scripts": "4.0.1",
      ....
    },
    "scripts": {
    -  "start": "react-scripts start",
    +  "start": "kkt start",
    -  "build": "react-scripts build",
    +  "build": "kkt build",
    -  "test": "react-scripts test",
    +  "test": "kkt test",
    -  "eject": "react-scripts eject"
    },

    ⚠️ Note: Do NOT flip the call for the eject script. That gets run only once for a project, after which you are given full control over the webpack configuration making kkt no longer required. There are no configuration options to rewire for the eject script.

    # Start the Dev Server
    $ npm start
    # Build your app
    $ npm run build

    Configuration

    Supports kktrc.js and kktrc.ts.

    import express from 'express';
    import WebpackDevServer from 'webpack-dev-server';
    import { LoaderConfOptions, MockerAPIOptions, DevServerOptions, WebpackConfiguration } from 'kkt';
    
    type KKTRC = {
      proxySetup?: (app: express.Application) => MockerAPIOptions;
      devServer?: (config: WebpackDevServer.Configuration, options: DevServerOptions) => WebpackDevServer.Configuration;
      default?: (conf: WebpackConfiguration, evn: string, options: LoaderConfOptions) => WebpackConfiguration | Promise<WebpackConfiguration>;
    };

    Example

    import webpack from 'webpack';
    import WebpackDevServer from 'webpack-dev-server';
    import lessModules from '@kkt/less-modules';
    import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
    
    export default (conf: WebpackConfiguration, env: string, options: LoaderConfOptions) => {
      // The Webpack config to use when compiling your react app for development or production.
      // ...add your webpack config
      conf = lessModules(conf, env, options);
      return conf;
    }
    
    /**
     * Modify WebpackDevServer Configuration Example
     */
    export const devServer = (config: WebpackDevServer.Configuration) => {
      // Change the https certificate options to match your certificate, using the .env file to
      // set the file paths & passphrase.
      const fs = require('fs');
      config.https = {
        key: fs.readFileSync(process.env.REACT_HTTPS_KEY, 'utf8'),
        cert: fs.readFileSync(process.env.REACT_HTTPS_CERT, 'utf8'),
        ca: fs.readFileSync(process.env.REACT_HTTPS_CA, 'utf8'),
        passphrase: process.env.REACT_HTTPS_PASS
      };
      // Return your customised Webpack Development Server config.
      return config;
    };
    
    // Configuring the Proxy Manually
    import express from 'express';
    import { createProxyMiddleware } from 'http-proxy-middleware';
    import { MockerAPIOptions } from 'kkt';
    
    export const proxySetup = (app: express.Application): MockerAPIOptions => {
      app.use('/api', createProxyMiddleware({
        target: 'http://localhost:5000',
        changeOrigin: true,
      }));
      /**
       * Mocker API Options
       * https://www.npmjs.com/package/mocker-api
       */
      return {
        path: path.resolve('./mocker/index.js'),
        option: {
          proxy: {
            '/repos/(.*)': 'https://api.github.com/',
          },
          changeHost: true,
        }
      }
    }

    Command Help

    Usage: kkt [start|build|test] [--help|h]
    
    Displays help information.
    
    Options:
    
      --version, -v Show version number
      --help, -h Displays help information.
      --app-src, Specify the entry directory.
      --no-open-browser, Do not open in browser.
      --no-clear-console, Do not clear the command line information.
    
    Example:
    
    $ kkt build
    $ kkt build --app-src ./website
    $ kkt start
    $ kkt start --no-open-browser
    $ kkt start --no-clear-console
    $ kkt start --app-src ./website
    $ kkt test

    Home Page

    Add homepage to package.json

    The step below is important!

    Open your package.json and add a homepage field for your project:

    "homepage": "https://myusername.github.io/my-app",

    or for a GitHub user page:

    "homepage": "https://myusername.github.io",

    or for a custom domain page:

    "homepage": "https://mywebsite.com",

    KKT uses the homepage field to determine the root URL in the built HTML file.

    Plugins & Loader

    Development

    Runs the project in development mode.

    npm run bootstrap
    npm run build
    
    npm run lib:watch
    npm run kkt:watch

    Production

    Builds the app for production to the build folder.

    npm run build

    Acknowledgements

    @timarney for having created react-app-rewired.

    License

    MIT © Kenny Wong

    Install

    npm i kkt

    DownloadsWeekly Downloads

    333

    Version

    6.11.0

    License

    MIT

    Unpacked Size

    80.7 kB

    Total Files

    55

    Last publish

    Collaborators

    • wcjiang