S3 Static Website Hosting Route All Paths to Index html

Question

I am using S3 to host a javascript app that will use HTML5 pushStates  The problem is if the user bookmarks any of the URLs  it will not resolve to anything  What I need is the ability to take all url requests and serve up the root index html in my S3 bucket  rather than just doing a full redirect  Then my javascript application could parse the URL and serve the proper page    Is there any way to tell S3 to serve the index html for all URL requests instead of doing redirects  This would be similar to setting up apache to handle all incoming requests by serving up a single index html as in this example  https   stackoverflow com a 10647521 1762614  I would really like to avoid running a web server just to handle these routes  Doing everything from S3 is very appealing

User · Answer

It s very easy to solve it without url hacks  with CloudFront help    Create S3 bucket  for example  react Create CloudFront distributions with these settings    Default Root Object  index html Origin Domain Name  S3 bucket domain  for example  react s3 amazonaws com  Go to Error Pages tab  click on Create Custom Error Response    HTTP Error Code  403  Forbidden  404  Not Found  in case of S3 Static Website  Customize Error Response  Yes Response Page Path   index html HTTP Response Code  200  OK Click on Create

User · Answer

I ran into the same problem today but the solution of  Mark-Nutter was incomplete to remove the hashbang from my angularjs application   In fact you have to go to Edit Permissions  click on Add more permissions and then add the right List on your bucket to everyone  With this configuration  AWS S3 will now  be able to return 404 error and then the redirection rule will properly catch the case   Just like this     And then you can go to Edit Redirection Rules and add this rule     lt RoutingRules gt       lt RoutingRule gt           lt Condition gt               lt HttpErrorCodeReturnedEquals gt 404 lt  HttpErrorCodeReturnedEquals gt           lt  Condition gt           lt Redirect gt               lt HostName gt subdomain domain fr lt  HostName gt               lt ReplaceKeyPrefixWith gt     lt  ReplaceKeyPrefixWith gt           lt  Redirect gt       lt  RoutingRule gt   lt  RoutingRules gt    Here you can replace the HostName subdomain domain fr with your domain and the KeyPrefix     if you don t use the hashbang method for SEO purpose   Of course  all of this will only work if you have already have setup html5mode in your angular application    locationProvider html5Mode true  hashPrefix

User · Answer

Just to put the extremely simple answer  Just use the hash location strategy for the router if you are hosting on S3   export const AppRoutingModule  ModuleWithProviders   RouterModule forRoot routes    useHash  true  scrollPositionRestoration   enabled

User · Answer

If you landed here looking for solution that works with React Router and AWS Amplify Console - you already know that you can t use CloudFront redirection rules directly since Amplify Console does not expose CloudFront Distribution for the app   Solution  however  is very simple - you just need to add a redirect rewrite rule in Amplify Console like this     See the following links for more info  and copy-friendly rule from the screenshot     https   docs aws amazon com amplify latest userguide redirects html redirects-for-single-page-web-apps-spa https   github com aws-amplify amplify-console issues 83

User · Answer

The way I was able to get this to work is as follows   In the Edit Redirection Rules section of the S3 Console for your domain  add the following rules    lt RoutingRules gt     lt RoutingRule gt       lt Condition gt         lt HttpErrorCodeReturnedEquals gt 404 lt  HttpErrorCodeReturnedEquals gt       lt  Condition gt       lt Redirect gt         lt HostName gt yourdomainname com lt  HostName gt         lt ReplaceKeyPrefixWith gt     lt  ReplaceKeyPrefixWith gt       lt  Redirect gt     lt  RoutingRule gt   lt  RoutingRules gt    This will redirect all paths that result in a 404 not found to your root domain with a hash-bang version of the path  So http   yourdomainname com posts will redirect to http   yourdomainname com    posts provided there is no file at  posts   To use HTML5 pushStates however  we need to take this request and manually establish the proper pushState based on the hash-bang path  So add this to the top of your index html file    lt script gt    history pushState      entry page   location hash substring 1     lt  script gt    This grabs the hash and turns it into an HTML5 pushState  From this point on you can use pushStates to have non-hash-bang paths in your app

User · Answer

I was looking for an answer to this myself  S3 appears to only support redirects  you can t just rewrite the URL and silently return a different resource  I m considering using my build script to simply make copies of my index html in all of the required path locations  Maybe that will work for you too

User · Answer

I see 4 solutions to this problem  The first 3 were already covered in answers and the last one is my contribution    Set the error document to index html  Problem  the response body will be correct  but the status code will be 404  which hurts SEO  Set the redirection rules  Problem  URL polluted with    and page flashes when loaded  Configure CloudFront  Problem  all pages will return 404 from origin  so you need to chose if you won t cache anything  TTL 0 as suggested  or if you will cache and have issues when updating the site  Prerender all pages  Problem  additional work to prerender pages  specially when the pages changes frequently  For example  a news website    My suggestion is to use option 4  If you prerender all pages  there will be no 404 errors for expected pages  The page will load fine and the framework will take control and act normally as a SPA  You can also set the error document to display a generic error html page and a redirection rule to redirect 404 errors to a 404 html page  without the hashbang    Regarding 403 Forbidden errors  I don t let them happen at all  In my application  I consider that all files within the host bucket are public and I set this with the everyone option with the read permission  If your site have pages that are private  letting the user to see the HTML layout should not be an issue  What you need to protect is the data and this is done in the backend   Also  if you have private assets  like user photos  you can save them in another bucket  Because private assets need the same care as data and can t be compared to the asset files that are used to host the app

User · Answer

There are few problems with the S3 Redirect based approach mentioned by others    Mutliple redirects happen as your app s paths are resolved  For example   www myapp com path for test gets redirected as www myapp com   path for test There is a flicker in the url bar as the     comes and goes due the action of your SPA framework  The seo is impacted because -  Hey  Its google forcing his hand on redirects  Safari support for your app goes for a toss    The solution is    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   For SEO needs   making sure your index html does not cache  do the following   Configure an EC2 instance and setup an nginx server   Assign a public ip to your EC2 instance  Create an ELB that has the EC2 instance you created as an instance You should be able to assign the ELB to your DNS  Now  configure your nginx server to do the following things  Proxy pass all requests to your CDN  for index html only  serve other assets directly from your cloudfront  and for search bots  redirect traffic as stipulated by services like Prerender io    I can help in more details with respect to nginx setup  just leave a note  Have learnt it the hard way   Once the cloud front distribution update  Invalidate your cloudfront cache once to be in the pristine mode  Hit the url in the browser and all should be good

User · Answer

Was looking for the same kind of problem  I ended up using a mix of the suggested solutions described above   First  I have an s3 bucket with multiple folders  each folder represents a react redux website  I also use cloudfront for cache invalidation   So I had to use Routing Rules for supporting 404 and redirect them to an hash config    lt RoutingRules gt       lt RoutingRule gt           lt Condition gt               lt KeyPrefixEquals gt website1  lt  KeyPrefixEquals gt               lt HttpErrorCodeReturnedEquals gt 404 lt  HttpErrorCodeReturnedEquals gt           lt  Condition gt           lt Redirect gt               lt Protocol gt https lt  Protocol gt               lt HostName gt my host com lt  HostName gt               lt ReplaceKeyPrefixWith gt website1  lt  ReplaceKeyPrefixWith gt           lt  Redirect gt       lt  RoutingRule gt       lt RoutingRule gt           lt Condition gt               lt KeyPrefixEquals gt website2  lt  KeyPrefixEquals gt               lt HttpErrorCodeReturnedEquals gt 404 lt  HttpErrorCodeReturnedEquals gt           lt  Condition gt           lt Redirect gt               lt Protocol gt https lt  Protocol gt               lt HostName gt my host com lt  HostName gt               lt ReplaceKeyPrefixWith gt website2  lt  ReplaceKeyPrefixWith gt           lt  Redirect gt       lt  RoutingRule gt       lt RoutingRule gt           lt Condition gt               lt KeyPrefixEquals gt website3  lt  KeyPrefixEquals gt               lt HttpErrorCodeReturnedEquals gt 404 lt  HttpErrorCodeReturnedEquals gt           lt  Condition gt           lt Redirect gt               lt Protocol gt https lt  Protocol gt               lt HostName gt my host com lt  HostName gt               lt ReplaceKeyPrefixWith gt website3  lt  ReplaceKeyPrefixWith gt           lt  Redirect gt       lt  RoutingRule gt   lt  RoutingRules gt    In my js code  I needed to handle it with a baseName config for react-router  First of all  make sure your dependencies are interoperable  I had installed history  4 0 0 wich was incompatible with react-router  3 0 1   My dependencies are     history    3 2 0    react    15 4 1    react-redux    4 4 6    react-router    3 0 1    react-router-redux    4 0 7     I ve created a history js file for loading history   import  useRouterHistory  from  react-router   import createBrowserHistory from  history lib createBrowserHistory    export const browserHistory   useRouterHistory createBrowserHistory        basename    website1         browserHistory listen  location    gt        const path             exec location hash         1       if  path            browserHistory replace path              export default browserHistory    This piece of code allow to handle the 404 sent by the sever with an hash  and replace them in history for loading our routes   You can now use this file for configuring your store ans your Root file   import  routerMiddleware  from  react-router-redux   import  applyMiddleware  compose  from  redux    import rootSaga from     sagas   import rootReducer from     reducers    import  createInjectSagasStore  sagaMiddleware  from    redux-sagas-injector    import  browserHistory  from     history    export default function configureStore initialState        const enhancers             applyMiddleware              sagaMiddleware              routerMiddleware browserHistory                    return createInjectSagasStore rootReducer  rootSaga  initialState  compose    enhancers        import React   PropTypes  from  react   import  Provider  from  react-redux   import  Router  from  react-router   import  syncHistoryWithStore  from  react-router-redux   import MuiThemeProvider from  material-ui styles MuiThemeProvider   import getMuiTheme from  material-ui styles getMuiTheme   import variables from    sass-variable-loader          css variables variables prod scss   import routesFactory from     routes   import  browserHistory  from     history    const muiTheme   getMuiTheme       palette            primary1Color  variables baseColor              const Root     store     gt        const history   syncHistoryWithStore browserHistory  store       const routes   routesFactory store        return            lt Provider      store   gt               lt MuiThemeProvider muiTheme  muiTheme  gt                   lt Router      history  routes     gt               lt  MuiThemeProvider gt           lt  Provider gt             Root propTypes         store  PropTypes shape     isRequired      export default Root    Hope it helps  You ll notice with this configuration I use redux injector and an homebrew sagas injector for loading javascript asynchrounously via routing  Don t mind with theses lines

User · Answer

It s tangential  but here s a tip for those using Rackt s React Router library with  HTML5  browser history who want to host on S3   Suppose a user visits  foo bear at your S3-hosted static web site  Given David s earlier suggestion  redirect rules will send them to    foo bear  If your application s built using browser history  this won t do much good  However your application is loaded at this point and it can now manipulate history   Including Rackt history in our project  see also Using Custom Histories from the React Router project   you can add a listener that s aware of hash history paths and replace the path as appropriate  as illustrated in this example   import ReactDOM from  react-dom       Application-specific details     const route        import   Router  useRouterHistory   from  react-router   import   createHistory   from  history    const history   useRouterHistory createHistory      history listen function  location      const path               exec location hash         1     if  path  history replace path        ReactDOM render     lt Router history  history  routes  route   gt     document body appendChild document createElement  div         To recap    David s S3 redirect rule will direct  foo bear to    foo bear  Your application will load  The history listener will detect the   foo bear history notation  And replace history with the correct path    Link tags will work as expected  as will all other browser history functions  The only downside I ve noticed is the interstitial redirect that occurs on initial request   This was inspired by a solution for AngularJS  and I suspect could be easily adapted to any application

User · Answer

since the problem is still there I though I throw in another solution  My case was that I wanted to auto deploy all pull requests to s3 for testing before merge making them accessible on  mydomain  pull-requests  pr number    ex  www example com pull-requests 822    To the best of my knowledge non of s3 rules scenarios would allow to have multiple projects in one bucket using html5 routing so while above most voted suggestion works for a project in root folder  it doesn t for multiple projects in own subfolders   So I pointed my domain to my server where following nginx config did the job  location  pull-requests        try files  uri  get files    location  get files       rewrite    pull-requests         1 break      proxy pass http    lt your-amazon-bucket-url gt       proxy intercept errors on      recursive error pages on      error page 404    get routes     location  get routes       rewrite      w           1  break      proxy pass http    lt your-amazon-bucket-url gt       proxy intercept errors on      recursive error pages on      error page 404    not found     location  not found       return 404      it tries to get the file and if not found assumes it is html5 route and tries that  If you have a 404 angular page for not found routes you will never get to  not found and get you angular 404 page returned instead of not found files  which could be fixed with some if rule in  get routes or something   I have to say I don t feel too comfortable in area of nginx config and using regex for that matter  I got this working with some trial and error so while this works I am sure there is room for improvement and please do share your thoughts   Note  remove s3 redirection rules if you had them in S3 config   and btw works in Safari

User · Answer

The easiest solution to make Angular 2  application served from Amazon S3 and direct URLs working is to specify index html both as Index and Error documents in S3 bucket configuration

User · Answer

You can now do this with Lambda Edge to rewrite the paths  Here is a working lambda Edge function    Create a new Lambda function  but use one of the pre-existing Blueprints instead of a blank function  Search for    cloudfront    and select cloudfront-response-generation from the search results  After creating the function  replace the content with the below   I also had to change the node runtime to 10 x because cloudfront didn t support node 12 at the time of writing     use strict   exports handler    event  context  callback    gt            Extract the request from the CloudFront event that is sent to Lambda Edge      var request   event Records 0  cf request          Extract the URI from the request     var olduri   request uri          Match any     that occurs at the end of a URI  Replace it with a default index     var newuri   olduri replace           index html            Log the URI as received by CloudFront and the new URI to be used to fetch from origin     console log  Old URI      olduri       console log  New URI      newuri           Replace the received URI with the URI that includes the index page     request uri   newuri       return callback null  request        In your cloudfront behaviors  you ll edit them to add a call to that lambda function on  Viewer Request    Full Tutorial  https   aws amazon com blogs compute implementing-default-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-lambdaedge

[amazon-web-services] S3 Static Website Hosting Route All Paths to Index.html

Examples related to amazon-web-services

Examples related to redirect

Examples related to amazon-s3

Examples related to routing

Examples related to pushstate