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

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


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('!');})


Make sure you have the index route configured for your website. Mostly it is index.htmlRemove routing rules from S3 configurationsPut 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) : 0Customize response: YesResponse Page Path : /index.htmlHTTP Response Code: 200


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.