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
- ⚛️ 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
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>`
basic
- The react base application.bundle
- Package the UMD package for developing the React component library.electron
- Use an example ofElectronjs
.less
- Use an example ofLess
.markdown
- Use an example ofMarkdown
.react-component-tsx
- Create a project containing the website for the react component library.rematch-tsx
- UseRematch
example for TypeScript.rematch
- UseRematch
for the project.scss
- Use an example ofScss
.stylus
- Use an example ofStylus
.typescript
- Use an example ofTypeScript
.uiw
- Useuiw
for the project.
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;
}
}
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.
- @kkt/less-modules
- @kkt/mocker-api
- @kkt/raw-modules
- @kkt/react-library
- @kkt/scope-plugin-options
- @kkt/stylus-modules
npm run hoist
npm run lib:watch
npm run kkt:watch
@timarney for having created react-app-rewired.