All Projects → kktjs → kkt

kktjs / kkt

Licence: MIT license
Create React apps with no build configuration, Cli tool for creating react apps.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
Less
1899 projects
CSS
56736 projects
SCSS
7915 projects

Projects that are alternatives of or similar to kkt

rocketact
🚀Developing React projects with ease
Stars: ✭ 45 (+12.5%)
Mutual labels:  create-react-app, zero-configuration, build-tools
universal-scripts
Build universal apps without configuration.
Stars: ✭ 23 (-42.5%)
Mutual labels:  create-react-app, zero-configuration, build-tools
Create Next App
Create Next.js apps in one command
Stars: ✭ 2,783 (+6857.5%)
Mutual labels:  zero-configuration, build-tools
Create React App
Set up a modern web app by running one command.
Stars: ✭ 92,264 (+230560%)
Mutual labels:  zero-configuration, build-tools
hyperapp-scripts
Hyperapp expansion pack for create-react-app
Stars: ✭ 38 (-5%)
Mutual labels:  create-react-app, zero-configuration
create-wp-react-app
Create React WordPress plugin with no build configuration.
Stars: ✭ 56 (+40%)
Mutual labels:  zero-configuration, build-tools
create-hyperapp
Create Hyperapps with no build configuration
Stars: ✭ 16 (-60%)
Mutual labels:  create-react-app, zero-configuration
phaser-cli
Create Phaser projects with no build configuration.
Stars: ✭ 53 (+32.5%)
Mutual labels:  zero-configuration, build-tools
cra-template-quickstart-redux
Opinionated quickstart Create React App template with Redux, React Testing Library and custom eslint configuration
Stars: ✭ 66 (+65%)
Mutual labels:  create-react-app, cra
react-typescript-material-ui-with-auth-starter
React + Material UI + Auth starter using TypeScript
Stars: ✭ 27 (-32.5%)
Mutual labels:  create-react-app, cra
craco-linaria
A craco plugin to use Linaria zero-runtime CSS in JS library in a create react app.
Stars: ✭ 29 (-27.5%)
Mutual labels:  create-react-app, cra
Craco
Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app
Stars: ✭ 5,285 (+13112.5%)
Mutual labels:  create-react-app, cra
create-contentful-app
Bootstrap a Contentful App
Stars: ✭ 68 (+70%)
Mutual labels:  zero-configuration, build-tools
react-starter-kit
🚀 React starter kit for a modern single page (SPA) application (dependencies updated at 28 July 2017). Zero configuration. Ready to go. Just paste your code!
Stars: ✭ 26 (-35%)
Mutual labels:  zero-configuration, build-tools
miz
🎯 Generate fake data, Just like a person.
Stars: ✭ 24 (-40%)
Mutual labels:  mocker
monkey-react-scripts
Monkey react script runner
Stars: ✭ 22 (-45%)
Mutual labels:  create-react-app
autovpn2
OpenVPN VPN Gate Client for Linux, connects you to a random Free VPN in a country of your choice by country code.
Stars: ✭ 30 (-25%)
Mutual labels:  zero-configuration
taroCloud
记日常、GitHub trending资讯小程序 taro-hooks + rematch+云开发
Stars: ✭ 25 (-37.5%)
Mutual labels:  rematch
zero
📦 A zero config scripts library
Stars: ✭ 17 (-57.5%)
Mutual labels:  zero-configuration
create-cra-template
A cli tool to generate cra-template from current create-react-app project.
Stars: ✭ 22 (-45%)
Mutual labels:  create-react-app

KKT LOGO

Build KKT & Example Github issues Github Forks Github Stars Github Releases npm version

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
  • ⚛️ 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/ncc support.

Usage

You will need Node.js installed on your system.

npm install kkt

Open in CodeSandbox

Open in CodeSandbox

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>`

You can download the following examples directly. Download page.

Tools

@kkt/ncc simple CLI for compiling a Node.js module into a single file. Supports TypeScript.

How to rewire your create-react-app project

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

Configuration File

Supports .kktrc.js and .kktrc.ts.

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>;
};

Base Configuration Example

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;
}

Modify WebpackDevServer Configuration Example

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;
};

Configuring the Proxy Manually

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,
    }
  }
}

Command Help

Usage: kkt [start|build|test] [--help|h]

Displays help information.

Options:

  --version, -v Show version number
  --help, -h Displays help information.
  --app-src, Specify the entry directory.
  --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 start
$ kkt start --no-open-browser
$ kkt start --no-clear-console
$ kkt start --app-src ./website
$ kkt test

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

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

Production

Builds the app for production to the build folder.

npm run build

Acknowledgements

@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.

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

MIT © Kenny Wong

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].