support for serving static files

[mirabledictu]

Hi, is there an equivalent of

app.use(express.static(`${root}/dist/client`, { index: false }))

in h3? Thanks

[mvrlin]

@mirabledictu You can use the serve-static package.

import serveStatic from 'serve-static'

// Available from /
app.use(serveStatic(`${root}/dist/client`))

// Available from /prefix
app.use('/prefix', serveStatic(`${root}/dist/client`))

[navicstein]

@mvrlin Unfortunately, its 2022 & still not working

[pi0]

Please try using https://github.com/unjs/nitro for supporting static asset serving and many more benefits on top of h3.

h3 aims to be a platform-independent framework and it is not easy to provide a solution that works out of the box without depending on node fs.

Thinking about integration with unstorage for static asset support (pending for https://github.com/unjs/unstorage/issues/21).

[magne4000]

For people stumbling upon this issue, here is the current way to leverage serve-static:

import { createApp, fromNodeMiddleware } from 'h3'
import serveStatic from 'serve-static'

const app = createApp()

// Available from /
app.use(fromNodeMiddleware(serveStatic(`${root}/dist/client`)))

// Available from /prefix
app.use('/prefix', fromNodeMiddleware(serveStatic(`${root}/dist/client`)))

[imcm7]

app.use(fromNodeMiddleware(serveStatic(`${root}/dist/client`)))

@magne4000 something not work, i try with nitroApp.h3App.use()

[gulshan]

I was able to use the built-in serveStatic like this-

let staticHandler = h3.eventHandler(async (event) => {
    let dir = import.meta.resolve('./static')
    await h3.serveStatic(event, {
        fallthrough: true,
        indexNames: undefined,
        getContents: (id) => readFile(new URL(dir + id)),
        getMeta: async (id) => {
            const stats = await stat(new URL(dir + id)).catch(console.warn);
            if (!stats || !stats.isFile()) {
                return;
            }
            return {
                size: stats.size,
                mtime: stats.mtimeMs,
            };
        },
    });
})

app.use("/", staticHandler)

[IlyaSemenov]

app.use doesn't work indeed, but luckily there is a workaround:

import serveStatic from "serve-static"

export default defineNitroPlugin((nitroApp) => {
  nitroApp.h3App.stack.unshift({
    route: "/uploads",
    handler: fromNodeMiddleware(serveStatic("./uploads", { immutable: true })),
  })
})