CODEWITHSUNDEEP
amazon-web-servicesember.jsamazon-s3
mehulkar
mehulkar

Reputation: 4974

AWS S3 404 with Ember app using history location

How do I tell AWS S3 to serve index.html for all pages instead of just /? It currently returns a 404 if I enter the app at any subroute. I'm using history location.

I tried both redirecting using this rule:

<RoutingRules>
  <RoutingRule>
    <Condition>
    <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
     </Condition>
    <Redirect>
      <HostName>yourdomainname.com</HostName>
    </Redirect>
  </RoutingRule>
</RoutingRules>

This ends in a redirect loop.

And I tried setting the error document to index.html. This isn't able to load static assets then because it attempts to find them at the url that was requested rather than the actual root url.

Upvotes: 4

Views: 500

Answers (3)

Artem Kozlenkov
Artem Kozlenkov

Reputation: 1254

If you are using CloudFront to host s3 website, which you probably should, anyways, the effective way to get rid of 404 on reload of non-index route like www.google.com/about or similar non / is by the following steps:

  1. Go to your CloudFront distribution
  2. Go to Error Pages
  3. Create a new error page with the following params:
    HTTP Error Code: 404
    TTL: 0
    Custom Error Response: Yes
    Response Page Path: /index.html
    HTTP Response Code: 200

enjoy

credits going to this article https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff

Upvotes: 0

Pritam Roy
Pritam Roy

Reputation: 193

Just change the error location to index.html , no redirection rules needed

Upvotes: 0

Anil Maurya
Anil Maurya

Reputation: 2328

I also stumble upon this problem and as you mentioned it's not possible but there is a workaround to this problem which I used.

Instead using ember 'history' location namespace I used 'hash' location namespace and I redirected request to my hashed routes.

My redirection rules

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>bucketname-website-us-east-1.amazonaws.com</HostName>
            <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

This way If user enter url manually in browser then user is taken to right page.

Upvotes: 1

Related Questions