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

Usage

You will need Node.js installed on your system.

Quick Start

npx create-kkt-ssr my-app
cd my-app
npm install
npm run start
npm run server

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

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

or

npm install -g create-kkt-ssr
# Create project, Using the template method
create-kkt-ssr 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.

development

Runs the project in development mode.

npm run start

production

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

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 README.md of the specific plugin, Just like the following:

npm install kkt-plugin-xxxx

export default (conf, evn) => {
  conf.plugins.push(require.resolve('kkt-plugin-xxxx'),)
  return conf;
};

Reset WebpackManifestPlugin

import { restWebpackManifestPlugin } from '@kkt/ssr/lib/plugins';

export default (conf, evn) => {
  // client ， In order to be compatible with the old lazy loading mode
  if (!options.bundle) {
    conf = restWebpackManifestPlugin(conf);
  }
  return conf;
};

use SSRWebpackRunPlugin

import { restWebpackManifestPlugin, getRemoveHtmlTemp, SSRWebpackRunPlugin } from '@kkt/ssr/lib/plugins';

export default (conf, evn) => {
   // client ，
  if (!options.bundle) {
    conf.plugins.push(new SSRWebpackRunPlugin());
    conf.plugins = getRemoveHtmlTemp(conf.plugins)
    conf = restWebpackManifestPlugin(conf);
  }
  conf.module.exprContextCritical = false;
  return conf;
};

See All Plugins

Writing Plugins

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

export default  (conf, env, options) => {
  // client only
  if (!options.bundle) {}
  // server only
  if (options.bundle) {}

  if (env==="development") {
    // 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.

export default (conf, evn) => {
  conf.plugins.push(require.resolve('@kkt/plugin-less'),)
  return conf;
};

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.

 // Modify the webpack config
export default (conf, evn, options) => {
  return conf;
};

Example

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-ssr my-app -e react-router-rematch

• basic - Server-side rendering of the react base application.
• react-router - React uses server-side rendering of the react-router.
• react-router-rematch - This is a sophisticated example, similar to next.js.

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License