egg-serlina
egg-serlina is a Serlina binding for Egg. It brings the best SSR solution to Egg application.
Install
$ npm i serlina egg-serlina react react-dom --save
Usage
Enable the plugin:
// {app_root}/config/plugin.jsexportsserlina = enable: true package: 'egg-serlina';
Add a client
folder and create the first page:
- app_root - app+ - client+ - pages+ - page1.js
// {app_root}/client/pages/page1.js { return <div>Hello Serlina</div>}
// {app_root}/config/config.default.js exportsserlina = map: '/page1': 'page1'
Then visit http://{your_host}/page1
and you will see the React page.
Please note that the egg
ctx
had been injected to your page:
// {app_root}/client/pages/page1.js Component static async { // ctx is egg `ctx` return data: await ctxservice } { return <div>thispropsdata</div> }
You can also render your page manually in controller:
// app/controller/page1.js moduleexports = async { const rendered = await ctxappserlina}
Remember to inject your
ctx
if you need it ingetInitialProps
.
Configuration
options
dev
boolean dev mode.
default: appInfo.env === 'local'
baseDir
string Serlina baseDir.
default: path.resolve(appInfo.baseDir, './client')
outputPath
string Serlina output files path.
publicPath
string Webpack's publicPath. Only work in prod
mode. Usually use it when you upload the Serlina output files to CDN.
default: /public/
map
object Using Serlina only in specific path:
exportsserlina = map: '/p/page1': 'page1' // render SSR page `page1` only when the `ctx.path` is `/p/page1`
see config/config.default.js for more detail.
Production deployment
self serve static files
Before deploy to production, please run serlina build
first (usually do it on CI):
// $/package.json
Then you need to serve the output path:
// {app_root}/config/config.default.jsexportsstatic = dir: path path ;
server static files on CDN
// $/package.json
// {app_root}/config/config.default.jsexportsserlina = publicPath: '${YOUR_CND_ENDPOINT}';
Limitation
While Egg will restart a new worker after file changing, Serlina will restart building. Maybe it will be frustrating when the client code getting bigger. PR is welcome if you know how to deal with this problem.