https://github.com/cdaringe/koa-parcel-middleware
parcel bundler koa middleware
https://github.com/cdaringe/koa-parcel-middleware
Last synced: about 1 year ago
JSON representation
parcel bundler koa middleware
- Host: GitHub
- URL: https://github.com/cdaringe/koa-parcel-middleware
- Owner: cdaringe
- Created: 2019-03-29T06:30:46.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-08-01T04:46:52.000Z (almost 2 years ago)
- Last Synced: 2025-04-12T23:35:27.311Z (about 1 year ago)
- Language: TypeScript
- Size: 238 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# koa-parcel-middleware
[parcel middleware](https://parceljs.org/api.html#middleware) for [koa](https://koajs.com/)
[](https://standardjs.com) [](https://github.com/semantic-release/semantic-release) [](https://greenkeeper.io/) [](https://circleci.com/gh/cdaringe/koa-parcel-middleware) [](https://www.typescriptlang.org)
## why
parcel middleware enables you to:
- wire in advanced features, such as server-side-rendering. isomorphic js in compact form
- serve your ui application _from_ your server application
- combine the parcel dev server functionality _with_ an existing server application, rather than an extra process
## install
`yarn add koa-parcel-middleware koa koa-static`
koa and koa-static are required `peerDependencies`. koa-static is required such that
non-js assets (e.g. css, images, etc) may be served gracefully as requested by your ui.
## usage
```ts
import { createMiddleware } from 'koa-parcel-middleware'
const middleware = createMiddleware({
bundler: `parcelBundlerInstance`,
renderHtmlMiddleware?: ``,
staticMiddleware: `koaStaticInstance` // serving parcel's built assets
})
```
the following is a rich, complete example of using the middleware api.
```ts
import { createMiddleware } from 'koa-parcel-middleware' // :)
import { App } from './app' // e.g. a react component
import { promises as fs } from 'fs'
import * as path from 'path'
import * as ReactDOMServer from 'react-dom/server'
import Bundler from 'parcel-bundler'
import CombinedStream from 'combined-stream'
import Koa from 'koa'
import serveStatic from 'koa-static'
// your parcel application's _unbuilt_ entry point!
const ENTRY_FILENAME = path.resolve(__dirname, 'index.html')
const isDev = process.env.NODE_ENV === 'development'
async function start () {
const app = new Koa()
// your parcel application's _built_ entry point!
const outFile = path.resolve(__dirname, 'dist', 'index.html')
const outDir = path.resolve(__dirname, 'dist')
const options = {
outDir,
outFile,
watch: isDev,
minify: !isDev,
scopeHoist: false,
hmr: isDev,
detailedReport: isDev
}
const bundler = new Bundler(ENTRY_FILENAME, options)
bundler.bundle()
const staticMiddleware = serveStatic(outDir)
const parcelMiddleware = createMiddleware({
bundler,
renderHtmlMiddleware: async (ctx, next) => {
// optionally wire in SSR!
// index.html
//
//
//
//
//
const outFileBuffer = await fs.readFile(outFile)
const [preAppEntry, postAppEntry] = outFileBuffer.toString()
.split(//)
ctx.status = 200
const htmlStream = new CombinedStream()
;[
preAppEntry,
ReactDOMServer.renderToNodeStream(App()),
postAppEntry
].map(content => htmlStream.append(content))
ctx.body = htmlStream
ctx.type = 'html'
await next()
},
staticMiddleware
})
app.use((ctx, next) => parcelMiddleware(ctx, next))
app.listen(3000)
}
start()
```