Angular.js with Prerender - angularjs

I was trying to use Prerender locally on port 3000, but phantom.js sometimes crashes and the css links gaves me many 504 http errors. I don't know how to set the links, absolute or relative? but in both ways, gaves me the same error.
My app is running on port 8000, I've added this on html file:
<meta name="fragment" content="!">
I'm using the service like this, it's the right way?
http://localhost:3000/http://127.0.0.1:8000

The CSS links causing a 504 isn't a problem. Once you proxy the requests through your webserver, it will work fine.
The correct URL to access to force the request through your middleware to the Prerender server is http://127.0.0.1:8000?_escaped_fragment_=
The middleware will then make it's own request to http://localhost:3000/http://127.0.0.1:8000 and return the page through the middleware.
As for crashing, PhantomJS can crash randomly and you don't have to worry about that when using our hosted service :)

Related

Why are my app http requests being changed into https requests?

I have a React app deployed in gh-pages which is loaded over https, and it sends requests to an EC2 instance that is using http.
The problem is that the HTTP requests that the React app is doing are being changed to HTTPS requests, which are not supported by this EC2 instance, so they always fail.
Any Ideas as why this is happening?
PD:
Of course I had this error first: Mixed Content: The page at xxx was loaded over HTTPS, but requested an insecure font yyy.
But I fixed it with the following tag:
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</head>
I know I should eventually load my EC2 instance over https, but I need a fix for now :P. Thank you guys.

How to redirect HTTP to HTTPS with Sails/React?

Current state: Depending on the npm start script, my web app is accessible by at the http:// address, or the https:// address, but not both.
Goal: I'd like the app to run on https://, and for any http:// requests to be redirected to https://.
App info: The web app is created with Sails for the server, and create-react-app for the UI. To run locally, I use two terminals to start each up (server on :1337, UI on :3000). To run in prod, I build the UI and copy the build into the server folder, then start the server on :84 (:80 already taken).
What I've tried:
I've tried adding redirection on the Sails server by adding middleware and policies.
I've tried adding redirection on the UI by adding a script in the HTML header, checking for window.location.protocol in index.js, adding to the http-proxy-middleware, and using react-https-redirect.
In all cases, I'm able to access the app if I go to the https:// address, but get err_empty_response from the http:// one. None of my http:// requests seem to even reach the app or server.
I've heard that using NGINX as a load-balancer may solve this, but I'm hoping for a solution that doesn't require as much set up. Any suggestions?

React app SPA on S3 AWS while refreshing the page shows 404 page

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.

hash tag is not removing from url AngularJS

I am creating a static site using angular 1. I done routing with ui-router.
Now I want to remove # tag from the url.
I googled it and got solution to enable html5 mode.
I done it as below:
app.config(function($locationProvider){
$locationProvider.html5mode= true;
})
and in index.html is added <base href="/"> but its not working.
and when i hitt localhost/myapp/ its showing Internal server error.
Please help me how to fix it.
Once you enable html5mode, you will need to rewrite your server.
Without html5mode, your browser would be making a request to http://localhost/ when the URL bar read http://localhost/#/myapp/ (because the browser doesn't send anything after the # symbol).
With html5mode, now that the # symbol is gone, the browser is making a request to http://localhost/myapp/, which your server may not be configured to handle.
Here's a resource that might help you out: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

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

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

Resources