pc175 / kkt

Create React apps with no build configuration, Cli tool for creating react apps.

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 5.x to 6.x.
• Migrate from kkt 4.x to 5.x.

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
• ⚛️ 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-tsx - Create a project containing the website for the react component library.
• rematch-tsx - Use Rematch example for TypeScript.
• 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 { ParsedArgs } from 'minimist';
import { LoaderConfOptions, DevServerConfigFunction } from 'kkt';

type KKTRC = {
  devServer?: (configFunction: DevServerConfigFunction, evn: string,) => DevServerConfigFunction;
  default?: (conf: Configuration, evn: string, options: LoaderConfOptions) => Configuration;
}
type DevServerConfigFunction = (proxy: WebpackDevServer.ProxyConfigArrayItem[], allowedHost: string)
    => WebpackDevServer.Configuration;

Example

import webpack, { Configuration } from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import lessModules from '@kkt/less-modules';
import { LoaderConfOptions } from 'kkt';

export default (conf: Configuration, 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;
}

export const devServer = (configFunction: DevServerConfigFunction) => {
  return (proxy: WebpackDevServer.ProxyConfigArrayItem[], allowedHost: string) => {
    // Create the default config by calling configFunction with the proxy/allowedHost parameters
    const config = configFunction(proxy, allowedHost);

    // 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;
  }
}

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

• @kkt/less-modules
• @kkt/mocker-api
• @kkt/raw-modules
• @kkt/react-library
• @kkt/scope-plugin-options
• @kkt/stylus-modules

Development

npm run hoist

npm run lib:watch
npm run kkt:watch

Acknowledgements

@timarney for having created react-app-rewired.

License

MIT © Kenny Wong