Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/minocoko/koa-react-carvel
A painless react server side rendering koa middleware
https://github.com/minocoko/koa-react-carvel
koa middleware react server-side-rendering
Last synced: 4 months ago
JSON representation
A painless react server side rendering koa middleware
- Host: GitHub
- URL: https://github.com/minocoko/koa-react-carvel
- Owner: minocoko
- License: mit
- Created: 2019-01-16T14:36:03.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T02:00:30.000Z (about 2 years ago)
- Last Synced: 2024-04-26T08:02:55.139Z (9 months ago)
- Topics: koa, middleware, react, server-side-rendering
- Language: JavaScript
- Homepage:
- Size: 4.98 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# koa-react-carvel
[![Build][travis-img]][travis]
[![Downloads][koa-react-carvel-dt-img]][koa-react-carvel-pkg]
[![Version][koa-react-carvel-v-img]][koa-react-carvel-pkg]
[![Dependency][dependency-img]][dependency]
[![DevDependency][devDependency-img]][dependency]
[travis-img]: https://travis-ci.org/minocoko/koa-react-carvel.svg
[travis]: https://travis-ci.org/minocoko/koa-react-carvel
[coveralls-img]: https://coveralls.io/repos/github/minocoko/koa-react-carvel/badge.svg
[coveralls]: https://coveralls.io/github/minocoko/koa-react-carvel
[koa-react-carvel-pkg]: https://www.npmjs.com/package/koa-react-carvel
[koa-react-carvel-dt-img]: https://img.shields.io/npm/dt/koa-react-carvel.svg
[koa-react-carvel-v-img]: https://img.shields.io/npm/v/koa-react-carvel.svg
[dependency]: https://david-dm.org/minocoko/koa-react-carvel
[dependency-img]: https://david-dm.org/minocoko/koa-react-carvel/status.svg
[devDependency-img]: https://david-dm.org/minocoko/koa-react-carvel/dev-status.svg
A painless react server side rendering koa middleware
### Features
* Stream & string mode rendering
* Gzip compression on stream & string rendering
* Rendering cache
* Styled-component & sass & less
* Cookie & token base credential
* Only few change when apply to exists or new react project
* use exists client routing
### Usage
Base on project create by create-react-app & react-router-dom
* Install packages
```bash
yarn add koa-react-carvel react react-dom react-router-dom \
koa koa-router koa-static pm2
```
* Update index.js
Use App.js and render elements with hydrate or render accordingly
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Root from './App';
import * as serviceWorker from './serviceWorker';
const rootElement = document.getElementById('root');
const renderOrHydrate = rootElement.children.length ? 'hydrate' : 'render';
ReactDOM[renderOrHydrate]((
), rootElement);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
```
* Create server & use koa-react-carvel middleware
server/index.js
```javascript
import path from 'path';
import Koa from 'koa';
import serve from 'koa-static';
import Router from 'koa-router';
import carvel, { StreamRender } from 'koa-react-carvel';
import Root from '../src/App';
const ssrConfig = {
buildPath: path.resolve('./build'),
rootElementId: 'root',
render: new StreamRender({
root: Root
})
}
const router = new Router();
router.get('/', carvel(ssrConfig));
const app = new Koa();
app.use(router.routes());
app.use(router.allowedMethods());
app.use(serve(ssrConfig.buildPath));
const port = parseInt(process.env.PORT, 10) || 4000;
app.listen(port, () => {
console.log(`Server has started at ${port}`);
});
```
* update config & add build script
add new path to config/paths.js
```javascript
appSsrBuild: resolveApp('build-server'),
appSsrIndexJs: resolveModule(resolveApp, 'server/index'),
appSsr: resolveApp('server'),
```
add new script to package.json
```javascript
"watch:server": "node scripts/watch-server.js",
"start:server": "pm2 start --no-daemon config/pm2.server.dev.config.js",
"build:server": "node scripts/build-server.js",
"server": "pm2 start config/pm2.server.prod.config.js",
```
add new building files
add [config/pm2.server.dev.config.js](examples/simple/config/pm2.server.dev.config.js)
add [config/pm2.server.prod.config.js](examples/simple/config/pm2.server.prod.config.js)
add [config/webpack.config.server.js](examples/simple/config/webpack.config.server.js)
add [scripts/build-server.js](examples/simple/scripts/build-server.js)
add [scripts/watch-server.js](examples/simple/scripts/watch-server.js)
* Start server & checking
```bash
npm run build
npm run build:server
npm run server
```
now ssr is working
### options
| name | require | type | description |
| ----------- | ----------- | ----------- | ----------- |
| buildPath | true | string | path of client build |
| rootElementId | true | string | root react element of client |
| render | true | object | render instance. can initialize from StringRender or StreamRender |
| cache | false | object | cache instance, can initialize from MemoryCacheProvider or RedisCacheProvider |
| template | false | string | html templae path,default value is 'index.html |
| plugins | false | array | render plugins. currently only support stringStyledComponentsPlugin or streamStyledComponentsPlugin |
### Examples
* [simple](examples/simple)
### License
MIT © [Minocoko](mailto:[email protected])