use hono as server #3
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,6 @@ | ||
| import { Readable } from 'node:stream' | ||
| import busboy from 'busboy' | ||
| import closeWithGrace from 'close-with-grace' | ||
| import { createElement as h } from 'react' | ||
| import { | ||
| renderToPipeableStream, | ||
|
|
@@ -13,54 +11,73 @@ import { shipDataStorage } from './async-storage.js' | |
|
|
||
| const PORT = process.env.PORT || 3000 | ||
|
|
||
| import { Hono } from 'hono' | ||
| import { compress } from 'hono/compress' | ||
| import { serveStatic } from '@hono/node-server/serve-static' | ||
| import { serve } from '@hono/node-server' | ||
|
|
||
| const app = new Hono() | ||
|
|
||
| app.use(compress()) | ||
| // this is here so the workshop app knows when the server has started | ||
| app.get('/', () => new Response()) | ||
|
||
|
|
||
| app.use(serveStatic({ root: 'public', index: false })) | ||
| app.use('/js/src', serveStatic({ root: 'src' })) | ||
|
|
||
| // This just cleans up the URL if the search ever gets cleared... Not important | ||
| // for RSCs... Just ... I just can't help myself. I like URLs clean. | ||
| app.use(({ req, redirect }) => { | ||
| if (req.query('search') === '') { | ||
| /** | ||
| * @fixme Not sure what Kent means by | ||
| * `req.query.search` and `req.search`. | ||
| */ | ||
| const searchParams = new URLSearchParams() | ||
|
There was a problem hiding this comment. This is the only place I didn't figure out. There's some difference between There was a problem hiding this comment. I can't find There was a problem hiding this comment. @kentcdodds, was this logic perhaps originally flawed a bit? Shouldn't it be this: if (req.query.search !== '') {
// Then remove "search" from query
// and redirect.
} |
||
| searchParams.delete('search') | ||
| const location = [req.path, searchParams.toString()] | ||
| .filter(Boolean) | ||
| .join('?') | ||
| return redirect(location, 302) | ||
| } | ||
| }) | ||
|
|
||
| const moduleBasePath = new URL('../src', import.meta.url).href | ||
|
|
||
| /** | ||
| * | ||
| * @param {import("hono").Context} context | ||
| */ | ||
| async function renderApp(context, returnValue) { | ||
| const { req, res } = context | ||
| try { | ||
| const shipId = req.param('shipId') || null | ||
| const search = req.query('search') || '' | ||
| const data = { shipId, search } | ||
| // Since Hono operates with web streams | ||
| // and "react-server-dom-esm" with Node.js streams, | ||
| // create a Readable, pipe RSD there, and convert it | ||
| // to a web ReadableStream for response. | ||
| const readable = new Readable() | ||
| shipDataStorage.run(data, () => { | ||
| const root = h(App) | ||
| const payload = { root, returnValue } | ||
| const { pipe } = renderToPipeableStream(payload, moduleBasePath) | ||
| pipe(readable) | ||
| }) | ||
| return new Response(Readable.toWeb(readable)) | ||
| } catch (error) { | ||
| console.error(error) | ||
| res.status(500).json({ error: error.message }) | ||
| } | ||
| } | ||
|
|
||
| app.get('/rsc/:shipId?', async context => { | ||
| await renderApp(context, null) | ||
| }) | ||
|
|
||
| app.post('/action/:shipId?', async context => { | ||
| const serverReference = context.req.header('rsc-action') | ||
| const [filepath, name] = serverReference.split('#') | ||
| const action = (await import(filepath))[name] | ||
| // Validate that this is actually a function we intended to expose and | ||
|
|
@@ -70,24 +87,30 @@ app.post('/action/:shipId?', bodyParser.text(), async (req, res) => { | |
| throw new Error('Invalid action') | ||
| } | ||
|
|
||
| const bb = busboy({ | ||
| // Busboy expects Node.js IncomingHeaders, which is an object. | ||
| headers: Object.fromEntries(context.req.raw.headers.entries()), | ||
| }) | ||
| const reply = decodeReplyFromBusboy(bb, moduleBasePath) | ||
| Readable.fromWeb(context.req.raw.body).pipe(bb) | ||
| const args = await reply | ||
| const result = await action(...args) | ||
|
|
||
| await renderApp(res, result) | ||
| }) | ||
|
|
||
| app.get('/:shipId?', serveStatic({ root: 'public', path: 'index.html' })) | ||
kettanaito marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const server = serve( | ||
| { | ||
| port: PORT, | ||
| fetch: app.fetch, | ||
| }, | ||
| () => { | ||
| console.log(`🚀 We have liftoff!`) | ||
| console.log(`http://localhost:${PORT}`) | ||
| }, | ||
| ) | ||
|
|
||
| closeWithGrace(async ({ signal, err }) => { | ||
| if (err) console.error('Shutting down server due to error', err) | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm thinking we're ok without this.
What you had before meant that when the browser requested the root of the app you'd just get an empty response instead of the index.html.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
HEAD is generally better if you want to check if the app is running. But a good think about it is that you don't have to have an explicit
app.head('/')to handle it. As I said, HEAD is handled by GET as a fallback, but will receive no response body, which is precisely what you want for the HEAD request.