{"id":15611482,"url":"https://github.com/minocoko/koa-react-carvel","last_synced_at":"2025-04-28T12:10:15.876Z","repository":{"id":34047694,"uuid":"166054975","full_name":"minocoko/koa-react-carvel","owner":"minocoko","description":"A painless react server side rendering koa middleware","archived":false,"fork":false,"pushed_at":"2022-12-10T02:00:30.000Z","size":5218,"stargazers_count":9,"open_issues_count":25,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-26T08:02:55.139Z","etag":null,"topics":["koa","middleware","react","server-side-rendering"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minocoko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-16T14:36:03.000Z","updated_at":"2020-04-01T13:45:31.000Z","dependencies_parsed_at":"2023-01-15T04:15:25.374Z","dependency_job_id":null,"html_url":"https://github.com/minocoko/koa-react-carvel","commit_stats":null,"previous_names":["minocoko/react-carvel"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minocoko%2Fkoa-react-carvel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minocoko%2Fkoa-react-carvel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minocoko%2Fkoa-react-carvel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minocoko%2Fkoa-react-carvel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minocoko","download_url":"https://codeload.github.com/minocoko/koa-react-carvel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250606211,"owners_count":21457905,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["koa","middleware","react","server-side-rendering"],"created_at":"2024-10-03T06:04:50.092Z","updated_at":"2025-04-28T12:10:15.852Z","avatar_url":"https://github.com/minocoko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# koa-react-carvel\n[![Build][travis-img]][travis]\n[![Downloads][koa-react-carvel-dt-img]][koa-react-carvel-pkg]\n[![Version][koa-react-carvel-v-img]][koa-react-carvel-pkg]\n[![Dependency][dependency-img]][dependency]\n[![DevDependency][devDependency-img]][dependency]\n\n[travis-img]: https://travis-ci.org/minocoko/koa-react-carvel.svg\n[travis]: https://travis-ci.org/minocoko/koa-react-carvel\n[coveralls-img]: https://coveralls.io/repos/github/minocoko/koa-react-carvel/badge.svg\n[coveralls]: https://coveralls.io/github/minocoko/koa-react-carvel\n[koa-react-carvel-pkg]: https://www.npmjs.com/package/koa-react-carvel\n[koa-react-carvel-dt-img]: https://img.shields.io/npm/dt/koa-react-carvel.svg\n[koa-react-carvel-v-img]: https://img.shields.io/npm/v/koa-react-carvel.svg\n[dependency]: https://david-dm.org/minocoko/koa-react-carvel\n[dependency-img]: https://david-dm.org/minocoko/koa-react-carvel/status.svg\n[devDependency-img]: https://david-dm.org/minocoko/koa-react-carvel/dev-status.svg\n\nA painless react server side rendering koa middleware\n\n### Features\n* Stream \u0026 string mode rendering\n* Gzip compression on stream \u0026 string rendering\n* Rendering cache\n* Styled-component \u0026 sass \u0026 less\n* Cookie \u0026 token base credential\n* Only few change when apply to exists or new react project\n* use exists client routing\n\n### Usage\n\nBase on project create by create-react-app \u0026 react-router-dom\n\n* Install packages\n    ```bash\n    yarn add koa-react-carvel react react-dom react-router-dom \\\n    koa koa-router koa-static pm2\n    ```\n\n* Update index.js\n\n    Use App.js and render elements with hydrate or render accordingly\n    ```javascript\n    import React from 'react';\n    import ReactDOM from 'react-dom';\n    import Root from './App';\n    import * as serviceWorker from './serviceWorker';\n\n    const rootElement = document.getElementById('root');\n    const renderOrHydrate = rootElement.children.length ? 'hydrate' : 'render';\n    ReactDOM[renderOrHydrate]((\n        \u003cRoot /\u003e\n    ), rootElement);\n\n    // If you want your app to work offline and load faster, you can change\n    // unregister() to register() below. Note this comes with some pitfalls.\n    // Learn more about service workers: http://bit.ly/CRA-PWA\n    serviceWorker.unregister();\n\n    ```\n\n* Create server \u0026 use koa-react-carvel middleware\n\n    server/index.js\n    ```javascript\n    import path from 'path';\n    import Koa from 'koa';\n    import serve from 'koa-static';\n    import Router from 'koa-router';\n    import carvel, { StreamRender } from 'koa-react-carvel';\n\n    import Root from '../src/App';\n\n    const ssrConfig = {\n        buildPath: path.resolve('./build'),\n        rootElementId: 'root',\n        render: new StreamRender({\n            root: Root\n        })\n    }\n    const router = new Router();\n    router.get('/', carvel(ssrConfig));\n\n    const app = new Koa();\n\n    app.use(router.routes());\n    app.use(router.allowedMethods());\n    app.use(serve(ssrConfig.buildPath));\n\n    const port = parseInt(process.env.PORT, 10) || 4000;\n    app.listen(port, () =\u003e {\n        console.log(`Server has started at ${port}`);\n    });\n\n    ```\n\n* update config \u0026 add build script\n\n    add new path to config/paths.js\n    ```javascript\n    appSsrBuild: resolveApp('build-server'),\n    appSsrIndexJs: resolveModule(resolveApp, 'server/index'),\n    appSsr: resolveApp('server'),\n    ```\n\n    add new script to package.json\n    ```javascript\n    \"watch:server\": \"node scripts/watch-server.js\",\n    \"start:server\": \"pm2 start --no-daemon config/pm2.server.dev.config.js\",\n    \"build:server\": \"node scripts/build-server.js\",\n    \"server\": \"pm2 start config/pm2.server.prod.config.js\",\n    ```\n\n    add new building files\u003cbr\u003e\n    add [config/pm2.server.dev.config.js](examples/simple/config/pm2.server.dev.config.js) \u003cbr\u003e\n    add [config/pm2.server.prod.config.js](examples/simple/config/pm2.server.prod.config.js) \u003cbr\u003e\n    add [config/webpack.config.server.js](examples/simple/config/webpack.config.server.js) \u003cbr\u003e\n    add [scripts/build-server.js](examples/simple/scripts/build-server.js) \u003cbr\u003e\n    add [scripts/watch-server.js](examples/simple/scripts/watch-server.js) \u003cbr\u003e\n    \n\n* Start server \u0026 checking\n\n    ```bash\n    npm run build\n    npm run build:server\n    npm run server\n    ```\n    now ssr is working\n\n### options\n\n|   name            |   require     |   type        |   description                                                                     |\n|   -----------     |   ----------- |   ----------- |   -----------                                                                     |\n|   buildPath       |   true        |   string      |   path of client build                                                            |\n|   rootElementId   |   true        |   string      |   root react element of client                                                    |\n|   render          |   true        |   object      |   render instance. can initialize from StringRender or StreamRender               |\n|   cache           |   false       |   object      |   cache instance, can initialize from MemoryCacheProvider or RedisCacheProvider   |\n|   template        |   false       |   string      |   html templae path,default value is 'index.html                                  |\n|   plugins         |   false       |   array       |   render plugins. currently only support stringStyledComponentsPlugin or streamStyledComponentsPlugin |\n\n\n### Examples\n\n* [simple](examples/simple)\n\n### License\n\nMIT © [Minocoko](mailto:minocoko@outlook.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminocoko%2Fkoa-react-carvel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminocoko%2Fkoa-react-carvel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminocoko%2Fkoa-react-carvel/lists"}