sift: Static files not working when deployed

Static files are not served on Deno Deploy; images are corrupt locally and when deployed.

I’ve created a sample project to reproduce this issue: https://github.com/wezm/repro-sift-static

In Deno Deploy it’s linked to https://github.com/wezm/repro-sift-static/blob/main/src/index.ts, accessible at https://quiet-owl-61.deno.dev/.

Screenshot 2021-07-09 at 08-50-55 Deno

When running locally with deployctl run --watch --libs=ns,fetchevent --addr :8888 src/index.ts the style sheet loads properly (somtimes) but when deployed it does not. The image does not load locally or when deployed.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 20 (7 by maintainers)

Most upvoted comments

Thanks for the patience, @wezm! I fixed the issue and released a new version 0.3.4. Please try it out and let me know if you face any issues.

The image does not load locally or when deployed.

There’s a tracking issue (https://github.com/denoland/deployctl/issues/60) on deployctl. But you’ll soon be able to run sift using deno without the need for deployctl, which should fix the local static assets issue.

@satyarohith The browser will reject a mutated headers object

// in line 76 you are trying to mutate the existing header
for (const [key, value] of newHeaders) {
   existingHeaders.set(key, value);
}

Instead, build a fresh set of headers from the existing and the browser will accept them.

// replace with the following 
// first place the existingHeaders in a new headers object
const newHeaders = new Headers(existingHeaders);
// do any housekeeping with this set...
 if (newHeaders.has("x-github-request-id")) {
    newHeaders.delete("content-security-policy");
  }
// then add you contentType header...
  for (const [key, value] of headers) {
    newHeaders.set(key, value);
  }
// finally, return the newHeaders object in a new Responce object
// line 80
  return new Response(res.body, {
    headers: newHeaders,
    status: res.status,
    statusText: res.statusText,
  });

I learned this the hard way when I built my own static file server for Deploy … https://clock.deno.dev/ SEE: https://github.com/nhrones/DotClock