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
You will need Node.js
installed on your system.
npx create-kkt-app my-app
cd my-app
npm start
You can also initialize a project from one of the examples. Example from kktjs/kkt-ssr example-path.
# Using the template method
# `npx create-kkt-app my-app [-e example name]`
npx create-kkt-app my-app -e react-router+rematch
or
npm install -g create-kkt-app
# Create project, Using the template method
create-kkt-app my-app -e react-router+rematch
cd my-app # Enter the directory
npm start # Start service
⚠️ A perfect examplereact-router+rematch
is recommended for production environments, This example is similar toNext.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
npm start -- --inspect
# or
yarn start -- --inspect
To debug the node server, you can use react-ssr start --inspect
. This will start the node server and enable the inspector agent. For more information, see this.
npm start -- --inspect-brk
# or
yarn start -- --inspect-brk
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 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
module.exports = {
plugins: [
require.resolve('kkt-plugin-xxxx'),
],
};
Plugins are simply functions that modify and return KKT's webpack config.
module.exports = (conf, { target, dev, env, ...other }, webpack) => {
// client only
if (target === 'web') {}
// server only
if (target === 'node') {}
if (dev) {
// dev only
} else {
// prod only
}
// conf: Webpack config
return conf;
}
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.
module.exports = {
plugins: [
require.resolve('@kkt/plugin-less'),
],
};
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;
The root directory creates the .kktrc.js
file.
module.exports = {
// Using plugins
plugins: [],
// Modify the babel config
babel: (conf, option) => {
return conf;
},
// Modify the webpack config
config: (conf, { target, dev, env, ...otherOptions }, webpack) => {
return conf;
}
};
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-app my-app -e react-router+rematch
basic
- Server-side rendering of the react base application.dynamic-loadable
- A react-loadable for server side rendering for your react application.less
- React uses the server side rendering of the Less based application.mock-api
- Server-side rendering mock api of the React base application.reach-router + loadable-components
- A reach-router loadable for server side rendering for your react application.react-router
- React uses server-side rendering of the react-router.react-router + loadable-components
- A react-router loadable-components for server side rendering.react-router + rematch + loadable-component
- A react-router loadable-components for server side rendering.react-router+rematch
- This is a sophisticated example, similar to next.js.scss
- React uses the server side rendering of the sass based application.styled-components
- Server-side rendering of the react styled-components base application.stylus
- React uses the server side rendering of the stylus based application.unstated
- React uses the server side rendering of the unstated based application.