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.

Migrate from kkt 4.x to 5.x.

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
• ⚛️ Refactor code based on create-react-app.
• 💝 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

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>`

• basic - The react base application.
• bundle - Package the UMD package for developing the React component library.
• electron - Use an example of Electronjs.
• less - Use an example of Less.
• markdown - Use an example of Markdown.
• react-component - Create a project for the react component library.
• react-component-tsx - Create a project containing the website for the react component library.
• rematch - Use Rematch for the project.
• scss - Use an example of Scss.
• stylus - Use an example of Stylus.
• typescript - Use an example of TypeScript.
• uiw - Use uiw for the project.

Configuration

Supports kktrc.js and kktrc.ts.

import { Argv } from 'yargs';

export interface ClientEnvironment {
  raw: {
    NODE_ENV?: 'development' | 'production' | string;
    PUBLIC_URL?: string;
    IMAGE_INLINE_SIZE_LIMIT?: string;
  },
  stringified: {
    'process.env': ClientEnvironment['raw'],
  },
}
export interface OptionConf {
  env: string; // Environment variable
  dotenv: ClientEnvironment;
  isEnvDevelopment: boolean;
  isEnvProduction: boolean;
  shouldUseSourceMap: boolean;
  publicPath: string;
  publicUrl: string;
  useTypeScript: boolean;
  yargsArgs: Argv; // Command Parameter
  paths: {
    moduleFileExtensions: string[];
  };
  // conf.resolve.plugins `ModuleScopePlugin` options.
  moduleScopePluginOpts?: KKTRC['moduleScopePluginOpts'];
}

/**
 * Modify webpack config.
 * */
export default (conf: webpack.Configuration, options: OptionConf, webpack: typeof webpack) => {
  return conf;
}

/**
 * This is the setting for the Plug-in `new ModuleScopePlugin`.
 * 
 * Prevents users from importing files from outside of src/ (or node_modules/).
 * This often causes confusion because we only process files within src/ with babel.
 * To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 * please link the files into your node_modules/ and let module-resolution kick in.
 * Make sure your source files are compiled, as they will not be processed in any way.
 * */
export const moduleScopePluginOpts = [
  path.resolve(process.cwd(), 'README.md'),
];

/**
 * Support for Less.
 * Opt-in support for Less (using `.scss` or `.less` extensions).
 * By default we support Less Modules with the
 * extensions `.module.less` or `.module.less`
 **/
export const loaderOneOf = [
  require.resolve('@kkt/loader-less'), // Support for less.
  require.resolve('@kkt/loader-scss'), // Support for scss.
  require.resolve('@kkt/loader-stylus'), // Support for stylus.
];

/**
 * mocker-api that creates mocks for REST APIs.
 * It will be helpful when you try to test your application without the actual REST API server.
 * https://github.com/jaywcjlove/mocker-api
 */
export const mocker = {
  path: string | string[];
  /**
   * https://github.com/jaywcjlove/mocker-api/tree/96c2eb94694571e0e3003e6ad9ce1c809499f577#options
   */
  option: MockerOption;
}

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.

Loaders

• @kkt/loader-less
• @kkt/loader-scss
• @kkt/loader-stylus

Development

npm run watch:lib
npm run watch:kkt

License

MIT © Kenny Wong