I have a SPA made with React JS on a S3 Bucket and I’m using Cloud Front to work through HTTPS and with a custom domain. When I refresh the page - if I have another Route that is not the BASE_URL (for example domain.com/something), S3 sends me a 404 error.
I also tried redirecting the error page to BASE_URL but it doesn’t work, it redirects me to the Http default domain that S3 provides me and again, it gives me an 404 error page.
I don’t know if there exists an alternative way to keep the URL without any change (domain.com/page) and avoid the 404 error the way a web server (apache) handles.
If you are using CloudFront to host s3 website, the effective way to get rid of 404 on reload of non-index route like www.google.com/about or similar non / is by the following steps:
Go to your CloudFront distribution
Go to Error Pages
Create a new error page with the following params:
HTTP Error Code: 404
TTL: 0
Custom Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200
enjoy
credits going to this article https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff
You have two options. Either use CloudFront error page as a catch-all that redirects to / (you mentioned you tried setting an error page but did not detail what you did. This should work). The downside is that it will respond with the HTML page for all not found paths, even for mistyped CSS paths, for example.
The other solution is to use Lambda#Edge to rewrite the origin request path. This is a more customizable solution and you can define which paths you want to redirect to the root.
Related
I thought of making a 404 Page. but it seems hard.. how do i do it?
Here's what I did:
Made .htaccess File
Put: ErrorDocument 404 /page-not-found.html inside of the .htaccess file..
Added css design
Why doesn't it work?
I use glitch as my coding website. Is that the problem?
Is there an alternative way to do this.?
If you want a custom 404 page for an app on Glitch, you'll need to be building a Node/full-stack app and configuring the page in your server-side code.
For example, I've got this simple Express app that sends any non-index route request to a 404 page: https://glitch.com/edit/#!/tranquil-hurricane-friction?path=server.js%3A25%3A0
I have a React App that is deployed on an S3 bucket.
When deploying a React Router app to S3, going directly to a React route will produce a 403 Access Denied error because S3 will try to look for an object in the bucket at that path.
Right now, we are redirecting all traffic to the index.html file, all the routes load fine, but first, we are receiving a 403 response, before the page loads. Which is causing a headache for Search Engines and SEO.
This can be solved by creating a custom error response in CloudFront that handles the HTTP 403 Response by responding with the index page and a 200 OK.
We are using Cloudflare as our CDN and switching to cloudfront at this point is not an option.
Is there a way to solve this problem using CloudFlare or S3 Configuration settings?
How do I redirect all requests to my static AWS S3 website to index.html so I can use AngularJS' HTML5 Mode?
I recently learned (to my unending delight) that it is possible to use AngularJS without the # in the URL by using HTML5 Mode. However, I know from this answer that this requires some setup on the server, since all requests have to be redirected to the right html file (in this case, index.html) for this to work.
I use AWS S3's static website hosting for my site. I tried adding this to my redirection rules:
<RoutingRules>
<RoutingRule>
<Redirect>
<ReplaceKeyWith>/</ReplaceKeyWith>
</Redirect>
</RoutingRule>
</RoutingRules>
and
<RoutingRules>
<RoutingRule>
<Redirect>
<ReplaceKeyWith>index.html</ReplaceKeyWith>
</Redirect>
</RoutingRule>
</RoutingRules>
but I get issues with too many redirects.
Is there a way to do the kind of redirection necessary in AWS S3 with the static website hosting?
You can use AWS CloudFront for your use case. Setup the S3 bucket behind CloudFront and add index.html as the default route.
Still if the page is refreshed in a angular route (e.g /home), AWS CloudFront will search for a /home.html file in S3 and return 404: Not Found Response. However there is a workaround for this, where you can setup an custom error response for 404: Not Found HTTP error code to points towards the /index.html response page path.
For more details refer the blog post Using AWS CloudFront to serve an SPA hosted on S3.
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?
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.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
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.
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
I've searched around for this quite a bit and found similar questions but not exactly the same, but nonetheless I apologize if this is a duplicate question.
Basically, I am trying to handle HTTP error responses (i.e. 404) with a custom error page (i.e. 404.html) when my application is down, but weblogic is still up.
I am using Apache 2.2 with the weblogic module. I have set the ErrorDocument directive for Apache as well as the ErrorPage parameter within the block.
I have also set the location within my web.xml for my application, but this question is for when the application is down.
Currently, when the app is down and weblogic is running I am getting the weblogic default 404 page. How can I force apache and/or weblogic to use my custom page?
Here is a sample of one variation of the config that I have tried.
<IfModule mod_weblogic.c>
WebLogicCluster host:port,host:port
KeepAliveEnabled ON
WLProxySSL OFF
Debug ALL
ErrorPage http://host:port/errors/errorSystem.html
</IfModule>
I can access the error page directly, but traffic is never forwarded on error.
I've also tried to set the ErrorPage to a relative url which is the ideal solution.
The explanation from apache.org do it also with samples of code:
ErrorDocument 500 http://xxx/
ErrorDocument 404 /Lame_excuses/not_found.html
ErrorDocument 401 /Subscription/how_to_subscribe.html
According to WebLogic documentation, with ErrorPage parameter, "The plug-in redirects to an error page when the back-end server returns an HTTP 503/Service Unavailable response and there are no servers for failover.".
So 404 error from WebLogic will not be redirected to our custom error page specified with ErrorPage parameter.
The workaround is to create a simple webapp and deploy it onto your WebLogic. In this webapp:
in [web.xml] Specifiy your custom error code and page mappings, e.g.:
<error-page>
<error-code>404</error-code>
<location>/errors/404.html</location>
</error-page>
in [weblogic.xml] State that your context-root is '/':
<weblogic-web-app xmlns="http://www.bea.com/ns/weblogic/90" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<context-root>/</context-root>
</weblogic-web-app>
Your need to have error pages in place such as in '/errors' folder of you webapp.
Note that the 'FMW Welcome Page Application' might have already been deployed and using '/' as context-root in your WebLogic domain. If that is the case, I believe it is safe to undeploy it or untarget it, but you are advised to raise a SR to product support asking whether it is hardful to do so.