{"id":15284510,"url":"https://github.com/cdaringe/koa-parcel-middleware","last_synced_at":"2025-04-12T23:36:02.851Z","repository":{"id":34673191,"uuid":"178346188","full_name":"cdaringe/koa-parcel-middleware","owner":"cdaringe","description":"parcel bundler koa middleware","archived":false,"fork":false,"pushed_at":"2024-08-01T04:46:52.000Z","size":244,"stargazers_count":7,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T23:35:27.311Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cdaringe.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-29T06:30:46.000Z","updated_at":"2020-11-20T19:22:49.000Z","dependencies_parsed_at":"2024-03-23T12:42:24.226Z","dependency_job_id":"c49ebfc8-1b71-4ebe-b910-07096983096f","html_url":"https://github.com/cdaringe/koa-parcel-middleware","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaringe%2Fkoa-parcel-middleware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaringe%2Fkoa-parcel-middleware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaringe%2Fkoa-parcel-middleware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaringe%2Fkoa-parcel-middleware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdaringe","download_url":"https://codeload.github.com/cdaringe/koa-parcel-middleware/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647257,"owners_count":21139081,"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":[],"created_at":"2024-09-30T14:57:48.603Z","updated_at":"2025-04-12T23:36:02.806Z","avatar_url":"https://github.com/cdaringe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# koa-parcel-middleware\n\n[parcel middleware](https://parceljs.org/api.html#middleware) for [koa](https://koajs.com/)\n\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Greenkeeper badge](https://badges.greenkeeper.io/cdaringe/koa-parcel-middleware.svg)](https://greenkeeper.io/) [![CircleCI](https://circleci.com/gh/cdaringe/koa-parcel-middleware.svg?style=svg)](https://circleci.com/gh/cdaringe/koa-parcel-middleware) [![TypeScript package](https://img.shields.io/badge/typings-included-blue.svg)](https://www.typescriptlang.org)\n\n## why\n\nparcel middleware enables you to:\n\n- wire in advanced features, such as server-side-rendering. isomorphic js in compact form\n- serve your ui application _from_ your server application\n- combine the parcel dev server functionality _with_ an existing server application, rather than an extra process\n\n## install\n\n`yarn add koa-parcel-middleware koa koa-static`\n\nkoa and koa-static are required `peerDependencies`.  koa-static is required such that\nnon-js assets (e.g. css, images, etc) may be served gracefully as requested by your ui.\n\n## usage\n\n```ts\nimport { createMiddleware } from 'koa-parcel-middleware'\nconst middleware = createMiddleware({\n  bundler: `parcelBundlerInstance`,\n  renderHtmlMiddleware?: `\u003coptionally-own-serving-your-entrypoint\u003e`,\n  staticMiddleware: `koaStaticInstance` // serving parcel's built assets\n})\n```\n\nthe following is a rich, complete example of using the middleware api.\n\n```ts\nimport { createMiddleware } from 'koa-parcel-middleware' // :)\nimport { App } from './app' // e.g. a react \u003cApp /\u003e component\nimport { promises as fs } from 'fs'\nimport * as path from 'path'\nimport * as ReactDOMServer from 'react-dom/server'\nimport Bundler from 'parcel-bundler'\nimport CombinedStream from 'combined-stream'\nimport Koa from 'koa'\nimport serveStatic from 'koa-static'\n\n// your parcel application's _unbuilt_ entry point!\nconst ENTRY_FILENAME = path.resolve(__dirname, 'index.html')\nconst isDev = process.env.NODE_ENV === 'development'\n\nasync function start () {\n  const app = new Koa()\n  // your parcel application's _built_ entry point!\n  const outFile = path.resolve(__dirname, 'dist', 'index.html')\n  const outDir = path.resolve(__dirname, 'dist')\n  const options = {\n    outDir,\n    outFile,\n    watch: isDev,\n    minify: !isDev,\n    scopeHoist: false,\n    hmr: isDev,\n    detailedReport: isDev\n  }\n  const bundler = new Bundler(ENTRY_FILENAME, options)\n  bundler.bundle()\n  const staticMiddleware = serveStatic(outDir)\n  const parcelMiddleware = createMiddleware({\n    bundler,\n    renderHtmlMiddleware: async (ctx, next) =\u003e {\n      // optionally wire in SSR!\n\n      // index.html\n      //\n      // \u003chtml\u003e\n      //   \u003cdiv id=\"app\"\u003e\u003c!-- ssr-content --\u003e\u003c/div\u003e\n      //   \u003cscript src=\"app.tsx\"\u003e\u003c/script\u003e\n      // \u003c/html\u003e\n      const outFileBuffer = await fs.readFile(outFile)\n      const [preAppEntry, postAppEntry] = outFileBuffer.toString()\n        .split(/\u003c!--.*ssr.*--\u003e/)\n      ctx.status = 200\n      const htmlStream = new CombinedStream()\n      ;[\n        preAppEntry,\n        ReactDOMServer.renderToNodeStream(App()),\n        postAppEntry\n      ].map(content =\u003e htmlStream.append(content))\n      ctx.body = htmlStream\n      ctx.type = 'html'\n      await next()\n    },\n    staticMiddleware\n  })\n  app.use((ctx, next) =\u003e parcelMiddleware(ctx, next))\n  app.listen(3000)\n}\nstart()\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaringe%2Fkoa-parcel-middleware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdaringe%2Fkoa-parcel-middleware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaringe%2Fkoa-parcel-middleware/lists"}