Noosphere Possibilities Maximized


    1.3.1 • Public • Published

    Create React server-side rendering universal JavaScript applications with no configuration. If you don't need server-side rendering you can use kkt tools.

    Quick Start · Using Plugins · Writing Plugins · CSS Modules · KKT Config · Example

    Let's fund issues in this repository


    You will need Node.js installed on your system.

    Quick Start

    npx create-kkt-app my-app
    cd my-app
    npm start

    You can also initialize a project from one of the examples. Example from kktjs/kkt-ssr example-path.

    # Using the template method 
    # `npx create-kkt-app my-app [-e example name]` 
    npx create-kkt-app my-app -e react-router+rematch


    npm install -g create-kkt-app
    # Create project, Using the template method 
    create-kkt-app my-app -e react-router+rematch
    cd my-app # Enter the directory 
    npm start # Start service 

    ⚠️ A perfect example react-router+rematch is recommended for production environments, This example is similar to Next.js.


    Runs the project in development mode.

    npm run start


    Builds the app for production to the build folder.

    npm run build

    The build is minified and the filenames include the hashes. Your app is ready to be deployed!

    # Runs the compiled app in production. 
    npm run server

    Enable Inspector

    npm start -- --inspect
    # or 
    yarn start -- --inspect

    To debug the node server, you can use react-ssr start --inspect. This will start the node server and enable the inspector agent. For more information, see this.

    npm start -- --inspect-brk
    # or 
    yarn start -- --inspect-brk

    To debug the node server, you can use react-ssr start --inspect-brk. This will start the node server, enable the inspector agent and Break before user code starts. For more information, see this.

    Using Plugins

    You can use KKT plugins by installing in your project and adding them to your .kktrc.js. See the of the specific plugin, Just like the following:

    npm install kkt-plugin-xxxx
    module.exports = {
      plugins: [

    See All Plugins

    Writing Plugins

    Plugins are simply functions that modify and return KKT's webpack config.

    module.exports = (conf, { target, dev, env, ...other }, webpack) => {
      // client only
      if (target === 'web') {}
      // server only
      if (target === 'node') {}
      if (dev) {
        // dev only
      } else {
        // prod only
      // conf: Webpack config
      return conf;

    CSS Modules

    KKT supports CSS Modules using Webpack's css-loader. Simply import your CSS file with the extension .module.css and will process the file using css-loader.

    import React from 'react';
    import styles from './style.module.css';
    const Component = () => <div className={styles.className} />;
    export default Component;

    Use Less

    Install the less plugin.

    npm install @kkt/plugin-less --save-dev

    Modify the .kktrc.js config and add plugins.

    module.exports = {
      plugins: [

    Use @kkt/plugin-less support Less.

    import React from 'react';
    import styles from './style.module.less';
    const Component = () => <div className={styles.className} />;
    export default Component;

    KKT Config

    The root directory creates the .kktrc.js file.

    module.exports = {
      // Using plugins
      plugins: [],
      // Modify the babel config
      babel: (conf, option) => {
        return conf;
      // Modify the webpack config
      config: (conf, { target, dev, env, ...otherOptions }, webpack) => {
        return conf;


    A complete react + react-router + rematch(redux) example is recommended for production projects, similar to next.js. Initialize the project from one of the examples:

    npx create-kkt-app my-app -e react-router+rematch


    MIT © Kenny Wong


    npm i @kkt/ssr

    DownloadsWeekly Downloads






    Unpacked Size

    175 kB

    Total Files


    Last publish


    • wcjiang