IIS rewrite rule for Facebook share dialog doesn't work - angularjs

I have the following rule
<rule name="SEO" enabled="true" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_USER_AGENT}" pattern="(facebookexternalhit)|(facebook)|(Twitterbot)|(Pinterest)" />
<add input="{QUERY_STRING}" pattern=".*escaped_fragment_=(.*)" />
</conditions>
<action type="Rewrite" url="http://localhost:8004/{URL}" />
</rule>
of my angularJS app hosted on the IIS (Windows Server 2012).
My app uses the html5Mode
$locationProvider.html5Mode().enabled = true;
and the port 8004 is opened (I turned off Windows firewall for a while to check if my scenario works)
The scenrio is easy. When someone wants to share my AngularJS page via facebook, the request will be redirected the the port, whene the PhantomJS is listening on (to render the page)
But the problem is I can only see the 404 error in the share box, and no request is fetched by the phantomJS script (I don't see anything in the console window)
var system = require('system');
var server = require('webserver').create();
server.listen(port, function (request, response) {
console.log(JSON.stringify(request, null, 4));
});
so it looks like the rewrite rule doesn't work (that's my guess). If I just go to the http://localhost:8004/, I can see the rendered page and the phantomJS log in the console window (so it works)

If you are trying to rewrite requests to different IIS website (or different app), then before that you need to install ARR:
1) You need to install ARR module https://www.iis.net/downloads/microsoft/application-request-routing
2) In IIS manager you should enable reverse proxy
2.1) On server node click "Application Request Routing Cache"
2.2) Click "Server proxy settings" and click "Enable proxy", then "Apply"
Also you need to apply small fix in your rule:
<rule name="SEO" enabled="true" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_USER_AGENT}" pattern="(facebookexternalhit)|(facebook)|(Twitterbot)|(Pinterest)" />
<add input="{QUERY_STRING}" pattern=".*escaped_fragment_=(.*)" />
</conditions>
<action type="Rewrite" url="http://localhost:8004{URL}" />
</rule>

Related

how can i host react app in IIS web server?

How can i host reactjs app in IIS webserver?
I used npm run build and replaced the file into the server and create new site which refers to those file.
also i add the binding all IP to port 80 using * sign.
but not worked.
After we run the below command, the output will create a new folder called “build” inside the project which contains production build. We could host the project by copying these files to the root directory of the IIS website, the website root folder should be able to be accessed properly by the anonymous account, and therefore we should grant IUSR account full access to the folder if it is not the default website.
After adding the web site binding in IIS binding module,
We could access the website properly by using the below address.
http://localhost
Besides, if we adding certain routing features (multiple components) in the react application, we have to install the IIS URL Rewrite extension.
https://www.iis.net/downloads/microsoft/url-rewrite
After a successful installation, we need to create a web.config file containing the below content under the root directory of the IIS website.
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Feel free to let me know if the problem still exists.

Azure Web App Angular Not redirecting to www

I have the following in my web.config
<configuration>
<system.webServer>
<httpErrors errorMode="Detailed" />
<rewrite>
<rules>
<rule name="Angular" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="index.html" appendQueryString="true"/>
</rule>
<rule name="Redirect to www" stopProcessing="true">
<match url="(.*)" />
<conditions trackAllCaptures="false">
<add input="{HTTP_HOST}" pattern="^mydomain.com$" />
</conditions>
<action type="Redirect"
url="{MapProtocol:{HTTPS}}://www.mydomain.com/{R:1}" />
</rule>
</rules>
<rewriteMaps>
<rewriteMap name="MapProtocol">
<add key="on" value="https" />
<add key="off" value="http" />
</rewriteMap>
</rewriteMaps>
</rewrite>
</system.webServer>
</configuration>
I have the following in my assets in my angular.json
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
],
But my app does not redirect.
The issues is i have a App Service managed cert setup for www.mydomain.com
I have two custom domains setup
www.mydomain.com (this one allows me to add the binding to the app service cert)
mydomain.com (is unbound as I cant add a cert)
So I thought I could fix it with the redirect to always go to www. but it does not seem to work
UPDATE
You can RewriterConfig to set url rewrite function in web.config file. More details you can see my answer in anothor post .
PRIVIOUS
The Web Server integrated by App Service cannot have full control, which is one of the attributes of PaaS products.
App Service can only use some functions of IIS. It needs to be configured in the web.config file under /site/wwwroot (that is, the root directory of the project you develop).
All available IIS functions can only be configured through the web.config file.
solution:
• Try to add redirect rule in the web config file. If it fails, you can only use the rewrite feature of the application gateway.
• The following are some documents of Application Gateway about rewrite feature for your reference.
Redirection
Redirect web traffic
Troubleshoot--App service issues

Azure AngularJS Index.html

My AngularJS app requires all actions to redirect to index.html for processing and it works fine on localhost, but it doesn't work in Azure.
For example:
localhost:1234 -> localhost:1234/#/ works
myapp.com -> myapp.com/#/ doesn't work
myapp.com/index.html -> myapp.com/index.html#/ works
I added:
<system.webServer xdt:Transform="Replace">
<rewrite>
<rules>
<rule name="redirect all requests" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="index.html" appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
The weird thing is that this works sometimes. I can't for the life of me figure out why sometimes going to myapp.com -> myapp.com/#/ works and other times it doesn't. It seems to also break myapp.com/index.html#/ but only sometimes. This is without making any deployment changes. It just works about half the time.
Edit
Here is the actual error message:
Microsoft.Owin, Version=2.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)
It might be about application startup. Here are some troubleshooting ideas.
Restart your app. Does that reliably cause the error?
Turn on application logging. portal.azure.com > Browse All > The Site Name > Settings > Diagnostic logs > Application Logging > Level Error. If you want lots of stuff, set level to verbose and turn on web server logging, detailed error messages, and failed request tracing.
View diagnostics at service control manager mysite.scm.azurewebsites.net. Choose Debug console > PowerShell. Now you can look through the logs at home/LogFiles.
Based on the error you are receiving, it looks like Owin is the problem. Check your websites bin to see if there are any Owin references. From the online service control manager, you can try this:
cd site/wwwroot/bin
Get-ChildItem -filter *Owin*
If there is anything there, then it's probably the cause of the particular error you are receiving.

Angular JS with facebook sharing

URL not redirecting to Prerender.io when sharing the url from facebook.
My site is http://www.vbuy.in/ , which is in demo and I am trying to share one of the url in facebook for example "http://www.vbuy.in/product/samsung-galaxy-grand-2-black-/1975"
Title and Description are showing from the home page (I added all those supported ng-content, and in script i registed the viewtitle etc..
I wrote a URL rewrite and also tested in https://developers.facebook.com/tools/debug/og/object/.
But, for me it looks like its not redirecting to prerender.io url. What Am I missing here? . I use IIS and also downloaded ARR and enabled proxy there.
I am having tough times for the last one week with SEO & social sharing part. Even before starting the project we were aware of SEO issues in angular js, but we thought when we go
live, we can use prerender or any pre render static html support. ( we didnt evaluated in depth earlier, due to time & resource constraints)
My code .. (Which is copied from other Stack overflow solutions.
<httpProtocol>
<customHeaders>
<add name="X-Prerender-Token" value="XXXXX....." />
</customHeaders>
</httpProtocol>
<rewrite>
<rules>
<rule name="Prerender" stopProcessing="true">
<match url="^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent))(.*)" ignoreCase="false" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_USER_AGENT}" pattern="googlebot|baiduspider|facebookexternalhit|twitterbot" />
<add input="{QUERY_STRING}" pattern="_escaped_fragment_" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="http://service.prerender.io/http://www.vbuy.in/{R:1}" />
</rule>

ReWrite in web.config to go between mobile and desktop sites

I am finishing up a new mobile website to compliment the desktop version. Currently I have a rewrite rule in the web.config file on my desktop site that looks like so:
<system.webServer>
<rewrite>
<rules>
<rule name="MobileRedirect" patternSyntax="ECMAScript" stopProcessing="true">
<match url=".*" ignoreCase="true" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_COOKIE}" pattern="nomobile" ignoreCase="true" negate="true" />
<add input="{HTTP_USER_AGENT}" pattern="android|blackberry|googlebot-mobile|iemobile|iphone|ipod|opera mobile|palmos|webos" />
</conditions>
<action type="Redirect" url="http://m.mysite.com" appendQueryString="false" redirectType="Found" />
</rule>
</rules>
</rewrite>
This works perfect if I never want the user to be able to use the desktop site while on a mobile device, but that is not always the case. Some links on the mobile site DO link back into the desktop version. I have a link on the footer of the mobile site to "view full site" as well.
So my question IS: how to properly handle cookie setting on that link and then detecting in the web.config and NOT redirecting to the mobile version IF it exists.... I have a conditional check in the web.config for http_cookie "nomobile", but I don't think it is properly working. Do I just send in a querystring value from the mobile and check that in the global.asax file or does that not work because the web.config runs first?
The desktop is a C# MVC4 site on IIS 7.5 if any of that helps, and the mobile site is a simply jquery mobile site.
Thank you!
EDIT:
I have tried checking the querystring in the global.asax file (code below) but it seems that "Request is not available in this context".
// create and set cookie if ?nomobile detected
string forcedesktop = HttpContext.Current.Request["nomobile"];
if(forcedesktop != null){
HttpCookie nomobile = new HttpCookie("nomobile");
Request.Cookies.Add(nomobile);
}
}

Resources