Kaon.js is a react isomorphic framework, render your code from server side, with automatic code splitting
npm install kaonjs
or with yarn
yarn add kaon
add your config
Config is a js file that default exported a Javascript object, it specified a lot ot configurations. The default path is . But you can put it into anywhere of your project.The config file is not required, Kaon will use the default config as below:
`js
const kaonConfig = {
ssr: true,
app: {
name: 'Kaon Config Template (production)',
shortName: 'rib',
port: 1827,
routes: ${baseDir}/app/routes,
middlewares: ${baseDir}/app/middlewares,
},
resources: {
root: ${baseDir}/public,
},
isomorphic: {
routes: ${baseDir}/src/routes,
store: ${baseDir}/src/store/configureStore.js,
main: ${baseDir}/src/client,
},
postcss: {
path: ${baseDir}/config/postcss.config.js,
},
webpack: {
client: ${baseDir}/config/webpack.client.config,
server: ${baseDir}/config/webpack.server.config,
},
build: {
host: 'localhost',
port: 1592,
path: 'build/',
target: ${baseDir}/public/build,
},
};
`An configuration specified these optons:
$3
Enable or disable server side side rendering. Disable ssr will improve start up speed.$3
$3
- app.name - The app name
- app.shortName - The short app name.
- app.port - App listening port.
- app.routes - Customize koa routes.
- app.middlewares - the js file that will apply your middlewares.$3
- resources.root - If resources.root is exist, kaon will serve all files inside the path as static server.$3
- isomorphic.routes - The client routes path, should be an string, the default value is .
- isomorphic.store - The client store path, should be an string, the default value is
- isomorphic.main - The client entry$3
- postcss.path - If use postcss, shoud specify postcss path.$3
- webpack.client - your client webpack configuration, object or function.
- webpack.server - your server webpack configuration, object or function.$3
- build.host - The dev server will server at this host.
- build.port - the dev server port.
- build.path - the dev server url path.
- build.target - the build result path.command line
command: $3
#### available options:
- config - specify config path
####
available options:
- config - specify config path
nodejs APIs
You can use kaon as an npm modules instead of cli.javascript
const Kaon = require('kaon');
const kaon = new Kaon(config);kaon.start();
`environment variables
$3
or no. If select yes, server side rendering will be enabled, no will disable server side rendering temporary.apply your middleware.
First, configure your middleware path, it should be a javascript file like below:`javascript
const logger = require('koa-logger');
const favicon = require('koa-favicon');
const path = require('path');function applyMiddlewares(app) {
app.use(logger());
app.use(favicon(path.join(__dirname, '../../public/favicon.ico')));
}
module.exports = applyMiddlewares;
`The app instance will be passed to your function, then just call
to apply the middlewares.apply your routes.
Just like apply middlewares. just don't forget configure your routes path in your config file.`javascript
const Router = require('koa-router');function applyRoutes(app) {
const router = new Router();
router.get('/', async (ctx) => {
ctx.body = 'hello world.';
});
app.use(router.routes());
app.use(router.allowedMethods());
}
module.exports = applyRoutes;
`add your customize script, styles, head tags, ect.
You can use react-helmet.apply your own webpack configuration.
ATTENTION! You cannot override default entry with yours.pm2 graceful reload
add the below configuration to your pm2
js
module.exports = {
apps : [{
name: "api",
script: "./api.js",
wait_ready: true,
listen_timeout: 3000,
}],
}
``