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.
- ⏱ 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 - 🐒 Simple CLI for compiling Node.js/Web modules to a single file with
@kkt/nccsupport.
You will need Node.js installed on your system.
npm install kkt
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.
basic- The react base application.Open in CodeSandboxbundle- Package the UMD package for developing the React component library.bundle-node- Simple CLI for compiling a Node.js module into a single file.electron- Use an example ofElectronjs.less- Use an example ofLess.Open in CodeSandboxmarkdown- Use an example ofMarkdown.Open in CodeSandboxreact-component-tsx- Create a project containing the website for the react component library.react-router- Usereact-routerfor the project.Open in CodeSandboxscss- Use an example ofScss.Open in CodeSandboxstylus- Use an example ofStylus.Open in CodeSandboxtypescript- Use an example ofTypeScript.Open in CodeSandboxuiw- Useuiwfor the project.Open in CodeSandbox
@kkt/ncc simple CLI for compiling a Node.js module into a single file. Supports TypeScript.
Create your app using create-react-app and then rewire it.
npm install kkt --save-dev"dependencies": {
...
- "react-scripts": "4.0.1",
+ "kkt": "7.0.6",
....
},
"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"
},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 buildSupports .kktrc.js and .kktrc.ts. @7.5+ above supports .cjs, .mjs, .ts, .js.
.kktrc.js
.kktrc.ts
.kktrc.cjs
.kktrc.mjs
.config/kktrc.js
.config/kktrc.ts
.config/kktrc.cjs
.config/kktrc.mjs
kkt.config.js
kkt.config.ts
kkt.config.cjs
kkt.config.mjsimport express from 'express';
import { Configuration } from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import { LoaderConfOptions, MockerAPIOptions, DevServerOptions } from 'kkt';
export interface WebpackConfiguration extends Configuration {
devServer?: WebpackDevServer.Configuration;
/** Configuring the Proxy Manually */
proxySetup?: (app: express.Application) => MockerAPIOptions;
}
export declare type KKTRC = {
proxySetup?: (app: express.Application) => MockerAPIOptions;
devServer?: (config: WebpackDevServer.Configuration, options: DevServerOptions) => WebpackDevServer.Configuration;
default?: (conf: WebpackConfiguration, evn: 'development' | 'production', options: LoaderConfOptions) => WebpackConfiguration | Promise<WebpackConfiguration>;
};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;
}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;
};import express from 'express';
import { createProxyMiddleware } from 'http-proxy-middleware';
import { LoaderConfOptions, WebpackConfiguration, MockerAPIOptions } from 'kkt';
export default (conf: WebpackConfiguration, evn: 'development' | 'production') => {
//....
conf.proxySetup = (app: express.Application): MockerAPIOptions => {
app.use('/api', createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
}));
return {
path: path.resolve('./mocker/index.js'),
};
};
return conf;
}Or use another way to manually configure the proxy.
import express from 'express';
import { createProxyMiddleware } from 'http-proxy-middleware';
import { MockerAPIOptions } from 'kkt';
/**
* Still available, may be removed in the future. (仍然可用，将来可能会被删除。)
*/
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,
}
}
}Usage: kkt [start|build|test|doc] [--help|h]
Displays help information.
Options:
--version, -v Show version number
--help, -h Displays help information.
--app-src Specify the entry directory.
--docs Static asset preview in package(Dev mode works).
--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 test
$ kkt test --env=jsdom
$ kkt test --env=jsdom --coverage
$ kkt start
$ kkt start --no-open-browser
$ kkt start --watch
$ kkt start --no-clear-console
$ kkt start --app-src ./website
# Static asset preview in "@uiw/doc" package.
# Default preview: http://localhost:3000/_doc/
$ kkt start --docs @uiw/doc/web
# Specify a static website route "_uiw/doc"
# Default preview: http://localhost:3000/_uiw/doc
$ kkt start --docs @uiw/doc/web:_uiw/doc
# Run static services separately
$ kkt doc --path @uiw/doc/web
$ kkt doc --path @uiw/doc/web:_uiw/doc --port 30002
$ kkt doc --path @uiw/doc/web:_uiw/doc -p 30002
$ kkt doc --path ./build/doc -p 30002Add 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.
- @kkt/less-modules
@kkt/mocker-api- @kkt/raw-modules
- @kkt/react-library
- @kkt/scope-plugin-options
- @kkt/stylus-modules
Runs the project in development mode.
# npm run bootstrap
npm run hoist
npm run build
npm run lib:watch
npm run kkt:watch
npm run hoistBuilds the app for production to the build folder.
npm run build@timarney for having created react-app-rewired.
Alternatives
- rescripts, an alternative framework for extending CRA configurations (supports 2.0+).
- react-scripts-rewired for a fork of this project that aims to support CRA 2.0
- craco Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app.
- react-app Create React App with server-side code support.
- create-react-app-esbuild Use esbuild in your create-react-app for faster compilation, development and tests.
As always, thanks to our amazing contributors!
Made with contributors.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent