Configure Amazon S3 static site with Angular JS ui

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

Basically there are 3 options, use an EC2 instance to perform the actual server rewrites to the configured HTML5 routes, or, like dnozay suggested, use the fallback mode and re-write requests to use the #! hashbang. Finally, you could just use the standard angular routes, which is the option I went with. Less hassle, and when Angular 2.0 rolls around, you can update to that.

https://stackoverflow.com/a/16877231/1733117

Doesn't really address the routing issue here.

Answer 2

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 3

here is another option using nginx proxy_pass, it also allows you to have multiple projects in subfolders and use subdomains

S3 Static Website Hosting Route All Paths to Index.html

Answer 4

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