How can I get S3 to use correct MIME types for static content?

[mikemaccana]

This is probably a documentation issue. As in, I don't understand how to do something and the current static docs don't tell me.

Quick question

Minor note: the docs don't cover this, but since S3 doesn't have 'real' folders (and looking at the other arc-examples), I guess /static should be flat and not have folders (folders do work on sandbox though, which is why I'm confused). Is that correct?

Issue

Source code: https://github.com/arc-repos/arc-example-notes, using arc 4.5.6

On sandbox:

On staging:

CORB error:

Edit: Note this is CORB not CORS.

[mikemaccana]

Oooh wait this is CORB not CORS....

[mikemaccana]

From reading https://www.chromium.org/Home/chromium-security/corb-for-developers it looks like the MIME type being sent incorrectly from S3 is causing the issue.

How can I get S3 to use correct MIME types for static content?

[brianleroux]

Could be a bug w upload code in deploy. You can change mimes in the S3 console. Just walking but will be atta machine shortly

[mikemaccana]

Thanks for the quick reply, that would be cool. I'll get into the console now. Am I right that /static has to be flat?

[brianleroux]

Nope! Just can't have empty folders is all

[mikemaccana]

Yeah it looks like you're right: the deploy code is trying to replicate the entire directory structure on S3:

    ✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/:/Users/mikem/OneDrive/Documents/arc-
example-notes/public/style.css

[mikemaccana]

Opening _copy_to_s3.js and changing:

var key = file.replace(path.join(process.cwd(), 'public'), '').substr(1)

To:

var key = file.replace(/.*\/public/, '').substr(1)

And running npx deploy returns:

✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/forms.css
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/cards.css
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/architect-favicon-32.png
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/architect-favicon-16.png
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/fonts.css
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/style.css
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/logo.svg
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/hero.css
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/nav.css
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/logo-light.svg
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/architect-favicon-64.png
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/readme.md
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/metrics.css
✓ https://s3.us-east-1.amazonaws.com/arc-example-notes-staging/colors.css

Which appear correct. However those files (unlike the ones above) do not appear in the S3 console. Is there some better way to redeploy static than npx deploy?

[mikemaccana]

PS the bug is a slash normalisation issue:

path.join(process.cwd(), 'public')

Is C:\Users\mikem\OneDrive\Documents\arc-example-notes\public

Let's call that publicDir

file.replace(publicDir, '')

Is C:/Users/mikem/OneDrive/Documents/arc-example-notes/public/architect-favicon-16.png

Note the different slashes.

So that solves the first part (I'll send a PR). But why is the deploy not working?

[mikemaccana]

Looks like the files just took a moment to appear n S3:

[mikemaccana]

I think I'm good for this, hitting dance/gym now but PR incoming later tonight

[mikemaccana]

Also for my own ref (and maybe yours): nodejs/node#8237

[brianleroux]

huh, TIL