@kkt/ssr

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.

Command Help

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

  Displays help information.

  Options:

   --version, -v         Show version number
   --help, -h            Displays help information.
   --s-ne, --s-nodeExternals          server use webpack-node-external .
   --c-ne, --c-nodeExternals          client use webpack-node-external .
   --s-st, --s-split          server Split code .
   --c-st, --c-split          client Split code .
   -o, --original          Use original react-scripts config .
   -m, --minify          All Minify output.
   --s-m, --s-minify          server Minify output.
   --c-m, --c-minify          clinet Minify output.
   --target                   clent or server or all.

  Example:

   $ kkt-ssr build
   $ kkt-ssr start
   $ kkt-ssr build --s-ne
   $ kkt-ssr start --s-ne
   $ kkt-ssr build --s-st
   $ kkt-ssr start --s-st
   $ kkt-ssr start -o

Quick Start

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

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 install # Watch file
npm run 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

Using Plugins

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

import pluginLess from "@kkt/plugin-less"
import { Options } from "@kkt/ssr/lib/interface"

export default {

  overridesCommonWebpack: (conf:webpack.Configuration,env:"development" | "production",options:Options) => {

    const newConfig = pluginLess(conf, {
      target: conf.target==="node14"?"node":"web",
      env,
      paths: options.paths
    })

    return newConfig
  },

};

See All Plugins

Rewrite Config

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

Rewrite Client Config

import { Options } from "@kkt/ssr/lib/interface"

export default {

  overridesClientWebpack:(conf:webpack.Configuration,env:"development" | "production",options:Options)=>{

    return conf

  }

}

Rewrite Server Config

1. devtool: The default is false,
2. target: The default is node,
3. output.library.type: The default is commonjs,

import { Options } from "@kkt/ssr/lib/interface"

export default {

  overridesServerWebpack:(conf:webpack.Configuration,env:"development" | "production",options:Options)=>{

    return conf

  }

}

More Webpack Config

import { Options } from "@kkt/ssr/lib/interface"

export default {

  overridesWebpack:(conf:webpack.Configuration[],env:"development" | "production",options:Options)=>{

    return conf

  }

}

Rewrite Env

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

Rewrite Paths

other paths

export default {

  paths:{

    appBuild: path.join(process.cwd(),"dist")

  }

}

Rewrite build output path

1. server_path: The default is src/server.js.
2. client_path: The default is src/client.js.
3. output_path: The default is dist.

export default {

  /** 服务端打包入口/Server packaging entry  */
  server_path: path.join(process.cwd(),"src/server.js"),
  /** 客户端打包入口/Client packaging entry */
  client_path: path.join(process.cwd(),"src/client.js"),
  /** 输出文件地址/Output address */
  output_path: path.join(process.cwd(),"dist");

}

proxySetup

Reference mocker-api

export default {

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

      }
    }
  }),

}

DefinePlugin

1. OUTPUT_PUBLIC_PATH: The default is path.join(process.cwd(),"dist")
2. KKT_PUBLIC_DIR: The default is process.env.KKT_PUBLIC_DIR or OUTPUT_PUBLIC_PATH
3. HOST: The default is process.env.HOST or localhost
4. PORT: The default is process.env.PORT or 3000
5. HOSTAPI: The default is undefined ， 当运行start命令时值为http://${HOST}:${PORT}
6. process.env.PORT: 默认值 3000
7. process.env.HOSTAPI: The default is undefined ， 当运行start命令时值为http://${HOST}:${PORT}
8. process.env.HOST: The default is localhost

KKTSSR Config

The root directory creates the .kktssrrc.js file.

参数	类型	默认值	说明
overridesClientWebpack	(conf: webpack.Configuration, env: "development" | "production", options: Options) => webpack.Configuration	undefined	覆写客户端配置
overridesServerWebpack	(conf: webpack.Configuration, env: "development" | "production", options: Options) => webpack.Configuration	undefined	覆写服务端配置
overridesCommonWebpack	(conf: webpack.Configuration, env: "development" | "production", options: Options) => webpack.Configuration	undefined	公共覆盖配置
overridesWebpack	(conf: webpack.Configuration[], env: "development" | "production", options: Options) => webpack.Configuration[] | webpack.Configuration	undefined	最终的配置
server_path	string	src/server.js	服务端打包入口
client_path	string	src/client.js	客户端打包入口
output_path	string	dist	输出文件地址
isUseOriginalConfig	boolean	false	是否使用原始 react-script 下的配置
isUseServerConfig	boolean	true	是否需要 server 配置
paths	Partial<Paths>	{}	paths 脚本中webpack配置 使用的地址
proxySetup	(app:Application)=>({path:stirng|string[],options:MockerOption})	undefined	mock 代理配置

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