Create-react-app: Document deployment to S3

[marcgarreau]

Description

When deploying CRA apps to S3, the error document is effectively ignored by IE11. This causes all routes outside of the root route to reach IE's default 404 page. I have not yet tested this on other IE versions.

Expected behavior

If error document is set to index.html, the application should still display the App.js component when visiting <S3-route>/anything. (Alternatively, if a customerror.html is set, it should display that, but doesn't.)

Chrome, Firefox and Safari perform this behavior as expected.

Actual behavior

IE default 404 page.

Environment

1. npm ls react-scripts: [email protected]
2. node -v: v5.5.0
3. npm -v: 3.5.3

Have tested from:

1. Operating system: Win 8.1
2. Browser and version: IE11

Reproducible Demo

I've got an example S3 deployment set up. You'll notice that the root route works fine, but you'll get the IE 404 page with any addition to the URL.

S3 Configuration:

The bucket has an open permissions policy:

{
    "Version": "2016-11-1",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::demo-party/*"
            ]
        }
    ]
}

and is configured for static website hosting:

More than happy to help debug further, but I'm about out of ideas on my end.

[marcgarreau]

Still not sure how to address this specific issue, but I got around this by layering Amazon's CloudFront CDN service over the S3 bucket, then declaring a custom error document in that distribution. These SO answers were helpful for getting that configured.

[marcgarreau]

I've written a blog post about deploying with S3 and CloudFront. Let me know if you'd like something added to the outputted README regarding either of these.

[ggregoire]

Thanks for the blog post! It would be really helpful to have this link directly in the README.

[gaearon]

@ggregoire You can add a paragraph with that link to the User Guide in the Deployment section and link to it from README.

[gaearon]

When deploying CRA apps to S3, the error document is effectively ignored by IE11.

To be clear there's nothing we can do in Create React App to fix an issue with Internet Explorer. We didn't write it after all 😉

But it would be great to add a link to the article to user guide.

[marcgarreau]

@gaearon @ggregoire quick PR up at: https://github.com/facebookincubator/create-react-app/pull/1071

[fson]

Fixed in #1071.