Skip to content

use hono as server #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

use hono as server #3

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
267371d
use hono as server
kettanaito Apr 29, 2024
8a9d5d1
replace "req.get" with "req.header"
kettanaito Apr 29, 2024
cdd8165
use hono as server
kettanaito Apr 29, 2024
52d2ce1
replace "req.get" with "req.header"
kettanaito Apr 29, 2024
d0a76bf
Merge branch 'use-hono' of github.com:kettanaito/react-server-compone…
kettanaito Apr 29, 2024
75753e2
fix serveStatic for js assets
kettanaito Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 2 additions & 9 deletions exercises/05.actions/05.solution.history-revalidation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,13 @@
"author": "Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com/)",
"license": "MIT",
"dependencies": {
"@hono/node-server": "^1.11.1",
"busboy": "^1.6.0",
"close-with-grace": "^1.3.0",
"hono": "^4.2.9",
"react": "19.0.0-beta-94eed63c49-20240425",
"react-dom": "19.0.0-beta-94eed63c49-20240425",
"react-error-boundary": "^4.0.13",
"react-server-dom-esm": "npm:@kentcdodds/tmp-react-server-dom-esm@19.0.0-beta-94eed63c49-20240425"
},
"devDependencies": {
"@hono/node-server": "^1.11.1",
"@types/node": "^20.11.30",
"prettier": "^3.2.5"
},
"eslintIgnore": [
"node_modules"
]
}
}
40 changes: 9 additions & 31 deletions exercises/05.actions/05.solution.history-revalidation/server/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { Readable } from 'node:stream'
import { serve } from '@hono/node-server'
import { serveStatic } from '@hono/node-server/serve-static'
import busboy from 'busboy'
import closeWithGrace from 'close-with-grace'
import { Hono } from 'hono'
import { compress } from 'hono/compress'
import { createElement as h } from 'react'
import {
renderToPipeableStream,
Expand All @@ -11,28 +15,17 @@ 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`.
*/
if (req.query.search === '') {
const searchParams = new URLSearchParams()
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only place I didn't figure out. There's some difference between req.search and req.query.search in Express, and I don't know it what that is.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't find req.search in Express API docs. Hmm.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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()]
Expand All @@ -44,20 +37,12 @@ app.use(({ req, redirect }) => {

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)
Expand Down Expand Up @@ -88,7 +73,6 @@ app.post('/action/:shipId?', async context => {
}

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)
Expand All @@ -101,16 +85,10 @@ app.post('/action/:shipId?', async context => {

app.get('/:shipId?', serveStatic({ root: 'public', path: 'index.html' }))

const server = serve(
{
port: PORT,
fetch: app.fetch,
},
() => {
console.log(`🚀 We have liftoff!`)
console.log(`http://localhost:${PORT}`)
},
)
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)
Expand Down
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.