Hono•4w ago

Can't get serveStatic to work with `root`

I'm a bit confused here: app.use("/static/*", serverStatic({ root: "./static"})) can't resolve /static/myscript.js But app.use("/myscript", serveStatic({ path: "./static/assets/myscript.js"}) does work when accessing /myscript Folder structure is: - src - static - assets - myscript.js

17 Replies

MohammedOP•4w ago

I'm using bun

ambergristle•4w ago

can you share a bit more about what's going on? if root is ./static, then ./static/assets/myscript.js duplicates the first segment, no?

MohammedOP•4w ago

Hmm, could that mean that root is not being set? Btw I also tried accessing it via /static/assets/myscript.js when only setting root, didn't work either There's nothing else going on. I only created a fresh project so it's all very isolated

ambergristle•4w ago

sorry for the confusion. i was asking for additional detail on what you're trying to accomplish and what's going wrong

MohammedOP•4w ago

Just trying to serve a js file statically. (also tried serving an html file for testing)

ambergristle•4w ago

that's not really enough for me to understand or reproduce your issue

MohammedOP•4w ago

What else do you need?

ambergristle•4w ago

the request paths you're using and the response error would be helpful

MohammedOP•4w ago

Getting 404s app.use("/static/*", serveStatic({ root: "./static"})) is what I use to set the root Then I want to access the file via this URL: /static/myscript.js also tried /static/assets/myscript.js If I do this: app.use("/static/*", serveStatic({ root: "./"})) I can access the file via this URL /static/assets/myscript.js

ambergristle•4w ago

yeah. the /static/* is confusing the middleware, though i'm not sure why yet ah, it's this: https://github.com/honojs/hono/blob/be0dbd6f862efcdbdb4d9f6f2013989162c3e088/src/middleware/serve-static/index.ts#L61

MohammedOP•4w ago

Probably I'm just misunderstanding how it's supposed to work

ambergristle•4w ago

i wouldn't expect /static/* to be included in the file path used either definitely not clear from the docs

MohammedOP•4w ago

How I understand it is: app.use("static/*" should resolve all files for URLs starting with /static and serveStatic({root: "./static"}) means it should start looking for the files in the /static directory So if my URL is /static/someFile.txt it should be available at URL /someFile.txt ?

ambergristle•4w ago

it gets doubled up the middleware uses the full request path, including the /static/* so either of these will work:

app.use('*', serveStatic({ root: './static' }));
// or
app.use('/static/*', serveStatic({ root: './' }));

app.use('*', serveStatic({ root: './static' }));
// or
app.use('/static/*', serveStatic({ root: './' }));

MohammedOP•4w ago

Damns son, paths are complicated Why does this not work? app.use("/static/*", serverStatic({ root: "./static"})) If my file is in /static/assets/myfile.txt Then my expectation was that I can cut the /static from he URL and access it like /assets/myfile.txt Guess it's the exact opposite of what I was thinking haha

ambergristle•4w ago

because you're specifying /static twice, so the resolved file path becomes /static/static/assets/myfile.txt check out the link i shared the middleware doesn't know what part of the path (i.e., /static/*) is for app routing, and what part is the file path

// use `./static` as the root for all requests
app.use('*', serveStatic({ root: './static' }));
// GET /assets/myfile.txt -> ./static/assets/myfile.txt

// or

// use `./` as the root, but only when requesting `/static/*`
app.use('/static/*', serveStatic({ root: './' }));
// GET /static/assets/myfile.txt -> ./static/assets/myfile.txt

// use `./static` as the root for all requests
app.use('*', serveStatic({ root: './static' }));
// GET /assets/myfile.txt -> ./static/assets/myfile.txt

// or

// use `./` as the root, but only when requesting `/static/*`
app.use('/static/*', serveStatic({ root: './' }));
// GET /static/assets/myfile.txt -> ./static/assets/myfile.txt

so when you double up:

// use `./static` as root for all requests for `/static/*`
app.use("/static/*", serverStatic({ root: "./static"}));
// GET /static/assets/myfile.txt -> ./static/static/assets/myfile.txt

// use `./static` as root for all requests for `/static/*`
app.use("/static/*", serverStatic({ root: "./static"}));
// GET /static/assets/myfile.txt -> ./static/static/assets/myfile.txt

it looks for a /static directory in the /static directory

MohammedOP•4w ago

Aight, thanks. Need to come back later to revisit it. Brain capacity doesn't allow it at the moment

Gaming

Programming

Can't get serveStatic to work with `root`

Did you find this page helpful?