ssr: A TypeScript repository from KKT

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

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

devtool: The default is false,
target: The default is node,
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

server_path: The default is src/server.js.
client_path: The default is src/client.js.
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

OUTPUT_PUBLIC_PATH: The default is path.join(process.cwd(),"dist")
KKT_PUBLIC_DIR: The default is process.env.KKT_PUBLIC_DIR or OUTPUT_PUBLIC_PATH
HOST: The default is process.env.HOST or localhost
PORT: The default is process.env.PORT or 3000
HOSTAPI: The default is undefined ，当运行start命令时值为http://${HOST}:${PORT}
process.env.PORT: 默认值 3000
process.env.HOSTAPI: The default is undefined ，当运行start命令时值为http://${HOST}:${PORT}
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