serving static html with routing

[zkrzyzanowski]

I'm following the documentation for serveStatic and attempting to serve up a static site with routing (using react-router).

The following code works when I try and visit http://localhost:8080/ and loads the html and static assets. However, trying to visit http://localhost:8080/someroute returns a 404. How can we serve up static files with routes from hono?

import { serve } from '@hono/node-server'
import { serveStatic } from '@hono/node-server/serve-static'
import { Hono } from 'hono'
import { secureHeaders } from 'hono/secure-headers'
import path from 'path'

const app = new Hono()
const appPath = path.join(path.dirname('./'), '/build/client/index.html')

app.use('/', serveStatic({ path: appPath }))
app.use('*', serveStatic({ root: '../build/client' }))

serve(
    {
        fetch: app.fetch,
        port: 8080,
    },
    info => {
        // eslint-disable-next-line no-console
        console.log(`Server is running on http://localhost:${info.port}`)
    }
)

[zkrzyzanowski]

Here's what we ended up with

const clientRoot = path.resolve(import.meta.dirname, '../../build/client')
const indexHtmlPath = path.resolve(clientRoot, './index.html')
const indexHtml = fs.readFileSync(indexHtmlPath, 'utf-8')

app.use('*', serveStatic({ root: clientRoot }))

app.get('/*', c => c.html(indexHtml))