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,

Answer 1

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 2

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 3

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

Answer 4

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