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
You will need Node.js
installed on your system.
Support multiple webpack configurations to execute together.
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 toNext.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.
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;
};
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 valuenode
, Default output.library.type valuecommonjs
,
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 valuesrc/client.js
. output_path: Default valuedist
.
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");
}
Rewrite watchOptions
export default {
watchOptions:{}
}
OUTPUT_PUBLIC_PATH:Default value path.join(process.cwd(),"dist")
The root directory creates the .kktssrrc.js
file.
// Modify the webpack config
export default {
};
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.As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License