Configure Amazon S3 static site with Angular JS ui.router html5Mode(true) on page refresh

Question

How can I configure an Amazon S3 static webpage to properly route Angular ui.router html5Mode routes? On page refresh, it will make a request for a file that doesn't exist, and angular can't handle it. In the docs, they recommend changing your URL rewrites on the server.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

However, S3 is storage, and doesn't offer the same redirection options I have been trying to use the built in redirection rules such as

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
        </Condition>
        <Redirect>
             <HostName>[[ your application's domain name ]]</HostName>
             <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

However, this just leads to a redirect loop.

Any suggestions?

Answer 1

In the Frequently Asked Questions, they rewrite almost everything to serve the index.html page. For HTML5 fallback mode you need to use #!/ (hashbang).

You could change this:

  <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>

with

  <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>

More details on this answer: https://stackoverflow.com/a/16877231/1733117

You may also need to configure your app for using that prefix:

angular.module(...)

...

.config(function($locationProvider) {
  $locationProvider.html5Mode(true).hashPrefix('!');
})

Answer 2

Make sure you have the index route configured for your website. Mostly it is index.html Remove routing rules from S3 configurations Put a Cloudfront in front of your S3 bucket. Configure error page rules for your Cloudfront instance.

In the error rules specify:

Http error code: 404 (and 403 or other errors as per need)
Error Caching Minimum TTL (seconds) : 0
Customize response: Yes
Response Page Path : /index.html
HTTP Response Code: 200