JSPM

kkt

6.0.10
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 162
  • Score
    100M100P100Q86227F
  • License MIT

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

Package Exports

  • kkt
  • kkt/lib/utils/getStyleLoaders

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (kkt) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
  • ⚛️ 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>`

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

Development

npm run hoist

npm run lib:watch
npm run kkt:watch

Acknowledgements

@timarney for having created react-app-rewired.

License

MIT © Kenny Wong