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.
kkt test
@kkt/ncc
support.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 CodeSandbox
bundle
- 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 of Electronjs
.less
- Use an example of Less
. Open in CodeSandbox
markdown
- Use an example of Markdown
. Open in CodeSandbox
react-component-tsx
- Create a project containing the website for the react component library.react-router
- Use react-router
for the project. Open in CodeSandbox
scss
- Use an example of Scss
. Open in CodeSandbox
stylus
- Use an example of Stylus
. Open in CodeSandbox
typescript
- Use an example of TypeScript
. Open in CodeSandbox
uiw
- Use uiw
for 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"
},
β οΈ 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
Supports .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.mjs
import 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 30002
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.
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 hoist
Builds the app for production to the build folder.
npm run build
@timarney for having created react-app-rewired.
Alternatives
As always, thanks to our amazing contributors!
Made with contributors.