use hono as server

[kettanaito]

• Rewrites the last step of the last exercise to use Hono for the server implementation instead of Express.
• The implementation is the same, if now fewer, LOC (the diff is larger because I've added a few explanations and Prettier unwraps certain lines). We also drop 3 dependencies in favor of two.

[kettanaito]

HEAD requests are handled by GET handlers. This is true for Express as well.

[kettanaito]

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.

[kettanaito]

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

[kettanaito]

@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.
}

[kentcdodds]

When running this locally, I'm getting:

TypeError: ctx.res.body.pipeThrough is not a function
    at compress2 (file:///Users/kentcdodds/code/epicweb-dev/react-server-components/node_modules/hono/dist/middleware/compress/index.js:12:41)

[kentcdodds]

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.

[kettanaito]

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.

[kettanaito]

When running this locally, I'm getting:

This likely means that res.body is not ReadableStream but it is something (otherwise we'd get "cannot read X of undefined").

Upon looking at it, that's precisely what happens:

http://localhost:3000
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
[Function: body]
TypeError: ctx.res.body.pipeThrough is not a function

At some point, res.body is a function. That's odd.

Why this is happening

This is triggered by the serveStatic middleware for public files. The client requests /js/src/index.js, and Hono fails to find it, and somehow provides the serveStatic function with the entire Context as the value of ctx.res. It does have the .body property but it's a method, and that's why it breaks the compress middleware.

How to solve this

I had to use serveStatic middleware properly. Now it's working (locally), have an error about RSC endpoint handler.

[kettanaito]

I fixed the previous error, and the app loads mostly fine. The GET /rsc/ request for some reason has trouble falling through to the dedicated handler, and instead gets stuck at the serveStatic+compress combination.

[kentcdodds]

Bummer. Almost there!

[gabrielelpidio]

I sent a PR to Artem's fork that might fix the issues: kettanaito#1, didn't find a better way to collaborate, I hope I'm not stepping over or inconveniencing anyone 😅

[nicksrandall]

FWIW #5 migrates the server to hono and removes the dependency on busboy entirely

[kentcdodds]

I prefer what's happening in #5. Thanks!