I have created Angularjs app and hosted in an IIS server. I used prerender.io for SEO and it works really well.
But I have a problem with sharing my web site on facebook. It gives me following errors when I try on facebook debugging tool.
https://developers.facebook.com/tools/debug
web.conf
<rule name="RemoveTrailingSlash" stopProcessing="true">
<match url="(.*)/$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Redirect" redirectType="Permanent" url="{R:1}" />
</rule>
<rule name="HotelRedirectRulesLenon1" patternSyntax="ECMAScript" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_HOST}" pattern="^example.(com|net|com.au)$" />
</conditions>
<action type="Redirect" url="http://www.example.org" />
</rule>
<rule name="HotelRedirectRulesLenon2" patternSyntax="ECMAScript" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_HOST}" pattern="^www.example.(com.au)$" />
</conditions>
<action type="Redirect" url="http://www.example.org/{R:0}" />
</rule>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
<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="baiduspider|facebookexternalhit|twitterbot" />
<add input="{QUERY_STRING}" pattern="_escaped_fragment_" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="http://example/{R:2}" />
</rule>
I responded to your email but wanted to respond here too in case anyone else has similar issues.
First, You shouldn't be doing a 301 redirect to http://service.prerender.io/. The proxy should happen behind the scenes so that the crawler has no idea you are using Prerender.io. If you 301 redirect, you are telling the crawler that you should send users to our service and that is incorrect.
Also, you are setting window.prerenderReady = false and never setting it to true so that means we are going to wait until we hit our timeout to return the page. That's causing Facebook to timeout.
Related
So, I have my react app hosted in ISS fine, and I have set up the url rewrite module and my react router navigation works fine.
My issue is,
HomeSite/Searchpage I have a table with search results.
When user clicks on one of the results, it will navigate to i.e.
https://www.site/LWM2/Detail/[itemid]
and then on my detail page it gets [itemid] from url to populate information on the page. via
const { [itemid] } = useParams();
How do I set up rules in Url Rewrite to have it go to detail page and preserve the [itemid] information
Current rules:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="RemoveTrailingSlashRule1" stopProcessing="true">
<match url="(.*)/$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Redirect" url="{R:1}" />
</rule>
<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="/LWM2/" appendQueryString="false" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
I've just created an empty .net core 3.1 / react app with the dotnet cli (dotnet new react -o new-app) and published it into Azure (via WebDeploy base on the downloaded publish profile).
The publish runs successful every time but after it I can't access the client app. The only thing I can see is the default page of azure:
Other parts of the application are working because if I call any endpoint then I got the correct response (e.g. the example action in the example controller of the template returns a valid json).
How should I change to access the client app?
I found the solution. I had to modifiy the web.config because of the client side routing. It is described below:
added a rule to pont the root url to wwwroot/index.html
<rule name="empty-root-index" stopProcessing="true">
<match url="^$" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_METHOD}" pattern="GET|HEAD" />
<add input="{QUERY_STRING}" pattern="^$|^lc=" />
</conditions>
<action type="Rewrite" url="wwwroot/index.html" />
</rule>
an other one which gets all the static content from wwwroot (where the client app lives)
<rule name="wwwroot-static" stopProcessing="true">
<match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg|ico))" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_METHOD}" pattern="GET|HEAD" />
</conditions>
<action type="Rewrite" url="wwwroot/{R:1}" />
</rule>
also one needed to get the client side routing work:
<rule name="html5-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="{HTTP_METHOD}" pattern="GET|HEAD" />
</conditions>
<action type="Rewrite" url="wwwroot/index.html" />
</rule>
last but not least the we have to set the mime types
<handlers>
<add name="StaticFileModuleHtml" path="*.htm*" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<!-- More goes here -->
<handlers>
I have an angularjs app running on .net framework. when i try to run it on .net core, i cannot fix the html5mode fallback on refreshing the page gets error 404
I already tried to create a web.config for url rewrite and creating a middleware.
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS 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>
I want to run angularjs html5mode on .net core using URL Rewrite
On your project, create a xml file like IISUrlRewrite.xml and copy paste the configuration
<rewrite>
<rules>
<rule name="AngularJS 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>
Then on your Startup.cs Configure() read that file and attach it on RewriteOptions().AddIISUrlRewrite
using (StreamReader iisUrlRewriteReader = File.OpenText("IISUrlRewrite.xml"))
{
var rules = new RewriteOptions();
rules.AddIISUrlRewrite(iisUrlRewriteReader);
app.UseRewriter(rules);
}
app.UseFileServer();
source reference here
I have been struggling to understand the rewrite rules in IIS 8.5 and would like some help. Basically for React app I would need to rewrite all the urls to enter at index.html plus optional queryparams.
the React app has to life in a sub director of the web server, as it is only an extension to the main-site
so but for the assets (folder), static (folder) and manifest.json (file) I do not need it to rewrite the url. these would fall in
www.some-site.com/catalog/door-selector/(folders or files and also the index.html)
all routes would start here too, see 2 examples:
www.some-site.com/catalog/door-selector/doors
www.some-site.com/catalog/door-selector/doors/(name of the door)
So I came up with the following: (doesnt work)
<rule name="Door Selector Door" patternSyntax="ExactMatch">
<match url="^catalog/door-selector/.+" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^~/static/~(.*)" negate="true" />
<add input="{REQUEST_URI}" pattern="^~/assets/~(.*)" negate="true" />
<add input="{REQUEST_URI}" pattern="^~/manifest.json" negate="true" />
</conditions>
<action type="Rewrite" url="catalog/door-selector/index.html" appendQueryString="true"/>
</rule>
With a simple rewrite and no conditions I get it to work but I would prefer to do it with only a couple of rules.
note: I forgot that certain assets were coming from the production server. and that was rewriting parts of the url!
final rule settled on:
<rule name="Door Selector React" enabled="true">
<match url="catalog/door-selector/(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="catalog/door-selector/index.html" appendQueryString="true"/>
</rule>
You could use below url rewrite rule:
<rule name="React Rewrite" enabled="true" patternSyntax="ECMAScript">
<match url="(.*)" negate="false" />
<action type="Rewrite" url="/index.html" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^(/assets/)" negate="true" />
<add input="{REQUEST_URI}" pattern="^(/static/)" negate="true" />
<add input="{REQUEST_URI}" pattern="manifest.json" negate="true" />
</conditions>
</rule>
Note:If you want to match subdirectory of your application or site you could set the condition as per your requirement.
Or you could share your site folder structure so we can help you more.
Regards,
Jalpa
you can use the below URL redirect. in web.config file
ile
<?xml version="1.0" encoding="utf-8"?>
<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="/IIS folder path/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
this will add new IIS redirect rule
I'm trying to get an angularjs + web api 2 with OAuth. Basically I select individual accounts from the Visual Studio ASP.NET Web Application template.
I need a rewrite for the angular stuff but I'm finding that makes it so I can't get my /token for the OAuth stuff? How can these 2 play nice?
<rewrite>
<rules>
<rule name="angularjs 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>
I always get this after I post ><
I added this to the conditions and it worked...
<add input="{REQUEST_URI}" pattern="^/token" negate="true" />