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.
- ⏱ 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 kktInitialize 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- Create a project for the react component library.react-component-tsx- Create a project containing the website for the react component library.rematch- UseRematchfor the project.scss- Use an example ofScss.stylus- Use an example ofStylus.typescript- Use an example ofTypeScript.uiw- Useuiwfor the project.
Supports kktrc.js and kktrc.ts.
import { Argv } from 'yargs';
export interface ClientEnvironment {
raw: {
NODE_ENV?: 'development' | 'production' | string;
PUBLIC_URL?: string;
IMAGE_INLINE_SIZE_LIMIT?: string;
},
stringified: {
'process.env': ClientEnvironment['raw'],
},
}
export interface OptionConf {
env: string; // Environment variable
dotenv: ClientEnvironment;
isEnvDevelopment: boolean;
isEnvProduction: boolean;
shouldUseSourceMap: boolean;
publicPath: string;
publicUrl: string;
useTypeScript: boolean;
yargsArgs: Argv; // Command Parameter
paths: {
moduleFileExtensions: string[];
};
// conf.resolve.plugins `ModuleScopePlugin` options.
moduleScopePluginOpts?: KKTRC['moduleScopePluginOpts'];
}
/**
* Modify webpack config.
* */
export default (conf: webpack.Configuration, options: OptionConf, webpack: typeof webpack) => {
return conf;
}
/**
* This is the setting for the Plug-in `new ModuleScopePlugin`.
*
* Prevents users from importing files from outside of src/ (or node_modules/).
* This often causes confusion because we only process files within src/ with babel.
* To fix this, we prevent you from importing files out of src/ -- if you'd like to,
* please link the files into your node_modules/ and let module-resolution kick in.
* Make sure your source files are compiled, as they will not be processed in any way.
* */
export const moduleScopePluginOpts = [
path.resolve(process.cwd(), 'README.md'),
];
/**
* Support for Less.
* Opt-in support for Less (using `.scss` or `.less` extensions).
* By default we support Less Modules with the
* extensions `.module.less` or `.module.less`
**/
export const loaderOneOf = [
require.resolve('@kkt/loader-less'), // Support for less.
require.resolve('@kkt/loader-scss'), // Support for scss.
require.resolve('@kkt/loader-stylus'), // Support for stylus.
];
/**
* mocker-api that creates mocks for REST APIs.
* It will be helpful when you try to test your application without the actual REST API server.
* https://github.com/jaywcjlove/mocker-api
*/
export const mocker = {
path: string | string[];
/**
* https://github.com/jaywcjlove/mocker-api/tree/96c2eb94694571e0e3003e6ad9ce1c809499f577#options
*/
option: MockerOption;
}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.
npm run watch:lib
npm run watch:kkt