Polka: Issue with sapper

[andreujuanc]

Hello!

So I was trying Sapper with Polka, and it was working great.

Until I found a weird behaviour, that I'm not sure if it's pokla or sapper. I changed pokla for express and everything works great again. Lets explain the issue:

I needed to serve static files form more than one directory, and sapper by default uses sirv and looks like it's not recursive, ie, wont serve subdirectories (didnt found any option about it either).

So I added a second "instance" .use('images', serve('assets/images')) and it didnt work. I was like WHAT? so i "unplugged" sapper from the pipeline and it served the static files like so /images/mysexypic.png.

I thought it was a sapper issue, and maybe it is, but it worked perfectly by using express with it. So by first attempt I think it's something related to polka.

My express config that works:

    var app = express();
    app
    .use('/images', serve('assets/images'))
    .use(
        compression({ threshold: 0 }), 
        sirv('assets'), 
        sapper({ routes, App })
    )
    .listen(process.env.PORT)
    .on('error', (error) => console.log(error));

Pokla version:

    polka() 
    .use('/images', serve('assets/images')) 
    .use(
        compression({ threshold: 0 })
        sirv('assets')
        sapper({ routes, App }) //commenting out sapper makes it work.
    )
    .listen(process.env.PORT)
    .catch(err => {
        console.log('error', err);
    })

Summoning @Rich-Harris just in case 👻

[lukeed]

Hey~!

Express filters thru its route definitions by the order it was received, while Polka parses the incoming pathname in a tree-like fashion, only respecting order once multiple handlers have been found for a given "level" (eg; compression, sirv, and sapper all running on the / path).

This is actually part of the reason Polka is so much faster 👍

Additionally, Sapper is meant to be the end-all solution; meaning it will terminate the response _somehow_, even if that's a 404 page. This means that it will never "let go" of the incoming request while also matching _all_ requests due to the / mount.

To solve this, you can modify your sirv('assets') to something like this:

let assets = sirv('assets');
let images = sirv('assets/images');

function files(req, res, next) {
  let fn = req.path.startsWith('/images') ? images : assets;
  fn(req, res, next);
}

polka()
  .use(
    compression({ threshold: 0 }),
    files,
    sapper({ routes, App })
  )
  // ...

---

Although, looking at your current routes, using /images from within your Svelte application should work just fine. Sirv _is_ recursive, but it's also evaluated eagerly. It caches all paths that exist within the directory at the moment sirv was booted.

If your images (or any) dir/files are created after the server boots, then sirv won't work for you~

[lukeed]

Hey, were you able to look into this again?

[andreujuanc]

Hey @lukeed , thanks for the reply.

Just tried again polka sirv and cant get it to work recursively. And as of now I need 4 or 5 subfolders to maintain everything tidy, does not look fancy to have sirv 5 different folders like that, it's prone to fail. IDK.

I really wanted to use pokla, since it's overkill to use express for sapper. Ill get my POC working first, and then maybe next week will try again to set it up properly.

Will see if i get time to get a repro.

Cheers

[lukeed]

Okay, would love a reproduction when you can!

You may want to try swapping out sirv for serve-static as the latter does not cache filepaths on init & will traverse the file structure at runtime. This is what express.static (or whatever the shortcut) is using under the hood.

[andreujuanc]

This first repro, is to confirm that sirv is not working recursively. Maybe I should open an issue there?

If you say that it should be recursive, and in my case, it's clearly not.
REpro: https://github.com/andreujuanc/repro-issue-sirv

Maybe i'm doing something wrong here?

I'll swap sirv for servestatic and see how it behaves.

YAY weekends xD

[lukeed]

Thanks for this! Tested it out, few things:

1) Cloning it as is & running it works totally fine

@Rich-Harris this makes me laugh every time, still

2) Navigating to /images/great-success.png works:

3) Navigating to /great-success.png does not work, but this purposeful. The app/server.js code contains only te following:

polka()
  .use(
    compression({ threshold: 0 }),
    sirv('assets'),
    sapper({ routes, App })
)

... which means that sirv is going to listen on all requests & look for matching items within the assets directory. For example:

http://localhost:3000/images/great-success.png
    req.path :: "/images/great-success.png"
    fs.existsSync("assets/images/great-success.png"); //=> true

http://localhost:3000/great-success.png
    req.path :: "/great-success.png"
    fs.existsSync("assets/great-success.png"); //=> false

---

Now, this makes me wonder what OS you're running. We had some Windows issues w/ tiny-glob but AFAIK we solved all teh bugz 🐛 Maybe not

[andreujuanc]

Ohhhh. Sorry, that's my bad. I'm running it on windows. And I can see you're on mac. Uhm maybe teh bugz 🐛 escaped death?

As soon as I get home ill check sirv and tinyglob in Windows. Maybe run tests if applicable.

Appreciate your time dealing with this little windows user :)

[lukeed]

Haha, thanks for reporting! It'll certainly help others too

[lukeed]

This should now be fixed in [email protected] 😄 Someone else had caught the issue and sent in a fix! 🎉

This is what the CACHE path map looked like:

// before
{ 
  "/img\\logo.png": "public\\img\\logo.png"
}

// after
{
  "/img/logo.png": "public\\img\\logo.png"
}

So, as in your case, any nested path would fail since an incoming URL _never_ contains \\ in it.

[andreujuanc]

Oh!! @lukeed thanks for posting back that info.
Will check it out ASAP!

[andreujuanc]

Looks like it's working!! Polka+sirv = so much win.

[lukeed]

Awesome! Thanks for following up 😄