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 · Rewrite Config · KKTSSR Config · Example

Usage

You will need Node.js installed on your system. Support multiple webpack configurations to execute together.

Quick Start

npx create-kkt-ssr my-app
cd my-app
npm install
npm run watch
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 run watch # Watch file
npm run server # 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 watch 
npm run server

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 plug-ins, taking KKT as an example Add .kktrc.js to the root directory of your project

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

Rewrite Config

Add .kktssrrc.js to the root directory of your project

Rewrite Client Config

export default {
  overridesClientWebpack:(conf,env)=>{
    return conf
  }
}

Rewrite Server Config

Default devtool value false, Default target value node, Default output.library.type value commonjs,

export default {
  overridesServerWebpack:(conf,env)=>{
    return conf
  }
}

More Webpack Config

export default {
  overridesWebpack:(conf,env)=>{
    return conf
  }
}

Rewrite Env

export default {
   /** 环境变变量 */
  GENERATE_SOURCEMAP: "false",
  INLINE_RUNTIME_CHUNK: "false",
  ESLINT_NO_DEV_ERRORS: "false",
  DISABLE_ESLINT_PLUGIN: "false",
}

Rewrite Paths

export default {
  paths:{
    appBuild: path.join(process.cwd(),"dist")
  }
}

Rewrite build output path

server_path: Default value src/server.js. client_path: Default value src/client.js. output_path: Default value dist.

export default {
    /** 服务端打包入口 */
  server_path: path.join(process.cwd(),"src/server.js"),
  /** 客户端打包入口 */
  client_path: path.join(process.cwd(),"src/client.js"),
  /** 输出文件地址 */
  output_path: path.join(process.cwd(),"dist");
}

proxySetup

Reference mocker-api

export default {
  proxySetup: (app) => ({
    path: "./mocker/index.js",
    options:{
      changeHost: true,
    }
  }),
}

Rewrite watchOptions

export default {
  watchOptions:{}
}

DefinePlugin

OUTPUT_PUBLIC_PATH：Default value path.join(process.cwd(),"dist")

KKTSSR Config

The root directory creates the .kktssrrc.js file.

 // Modify the webpack config
export default {
  
};

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