I am trying to implement Prerender.io in my ASP.NET application. I configured all the required necessary steps including
1)<meta name="fragment" content="!"> in head of Index.html
2) Configured the Module
<httpModules>
<add name="Prerender" type="Prerender.io.PrerenderModule, IslamicMatchMakers.Web, Version=1.0.0.0, Culture=neutral" />
</httpModules>
3) Added Custom Header
<httpProtocol>
<customHeaders>
<add name="X-Prerender-Token" value="XXXX" />
</customHeaders>
</httpProtocol>
4) Defined Rewrite rules
<rewrite>
<rules>
<!--# Only proxy the request to Prerender if it's a request for HTML-->
<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://service.prerender.io/http://{HTTP_HOST}/{R:1}" />
</rule>
<rule name="Html5Mode" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{URL}" pattern="/scripts/" negate="true" />
<add input="{URL}" pattern="/content/" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
5) I installed the Application Request Routing Module on IIS, in which I enable the Proxy. Here is the image how it looks like:
ARR
Now after all these configuration when I make a request to http://localhost:2525?_escaped_fragment_=
It just show me a blank page. I am not sure what I am missing, can anyone please suggest.
You won't be able to see anything if you're running on localhost. The Prerender.io servers can only access publicly available websites, so you could try pushing your code to a public staging server...or download our open source server and run it locally to test things first.
Feel free to email me if you have any more questions about getting things up and running! :)
todd#prerender.io
Related
I have an Windows Server hosted (IIS), in the root dir (head dir with FTP) I have a directory /www/ with an Angular SPA built, so an index.html inside.
I want to say to the server:
"Ehi, when people go to https://example.com you must to show www/index.html but with https://example.com on the URL" (so not with https://example.com/www/) is this possible??
And i have to say also:
"Ehi server! The routes are not real directory! This is an SPA!!" becouse the routing navigation is OK but the refresh doesn't works.
I think i have to write something on web.config file, but what?
Thanks in advance!
UPDATE:
I'm using:
<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="/www/" />
</rule>
</rules>
</rewrite>
</system.webServer>
This works for refresh but for "hidden redirect"...
I have the below config for url rewrite in my IIS
<rewrite>
<rules>
<rule name="Rewrite CI Index">
<match url=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|csv|ttf|woff|woff2|pdf|mp4|mov|ics" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(php_scripts)" negate="true" />
<add input="{REQUEST_URI}" pattern="^/documents/intranet_documents/" negate="true" />
</conditions>
<action type="Rewrite" url="index.php/{R:0}" />
</rule>
</rules>
</rewrite>
The negate directive is there to prevent rewrite for website assets files (css, fonts, etc.) as well as other files from the documents upload/download section.
The issue I just came across is this, one of the urls is like this http://intranet/HR/Training-Basics however when I try to navigate to this url I get 404 because it is being caught by the negate function for file extension ics.
So, I need to be able to access this url, but at the same time I need to be able to download the "ics" files. What is the best way to do it?
You could modify the condition pattern from ics to\.ics, so that the rewrite rule will only rewrite based on file extension instead of specific string segment.
<rule name="Rewrite CI Index">
<match url=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="\.(css|js|jpg|jpeg|png|gif|ico|htm|html|csv|ttf|woff|woff2|pdf|mp4|mov|ics)" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(php_scripts)" negate="true" />
<add input="{REQUEST_URI}" pattern="^/documents/intranet_documents/" negate="true" />
</conditions>
<action type="Rewrite" url="index.php/{R:0}" />
</rule>
I made a react app using create-react-app. I am trying to deploy it on azure web app. I created a build and deployed using FTP.
When there is the internal redirect from the react the app I am able to see the webpage. But when I try to directly go to the url, I get this error.
For example:
if base url is www.example.com, and the app internally redirects to /new, the page goes to www.example.com/new. But if I directly try to load www.example.com/new, I get the above shown response. This doesn't happen in local testing
Demo:
I have created a demo here
For it to work for me, I added a web.config-file in the public-folder (this is where favicon.ico, index.html & manifest.json is located), and added the following code:
<?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>
I hope this might help :)
Place the below web.config file under the /site/wwwroot directory
<?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>
When there is the internal redirect from the react the app I am able to see the webpage. But when I try to directly go to the url, I get this error.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
If you use Network tool to capture network traffic when you click the button New to render (redirect to) the new page, you will find it just changes the URL locally instead of really requesting for http://data-trigger-mass-test.azurewebsites.net/new to the server. When you directly browse and request for http://data-trigger-mass-test.azurewebsites.net/new to the server, the server could not find the resource, so it returns (404) error. In order to make the URL http://data-trigger-mass-test.azurewebsites.net/new work on both server and client-side, you may need to set up routes for it on both server and client side.
Your server should always send the root html file for all client request, so that it can pass routing to react.
If the server is NodeJs, add something like below into your server.js.
app.get('*', (req, res) => {
res.sendFile('public/index.html', { root: __dirname });
});
This worked:
<?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>
I created a web.config file in the public-folder where the index.html is located and added the above code.
I am working on an Angular2 app. It uses "#angular/common": "2.0.0-rc.4" and "#angular/router": "3.0.0-beta.2".
My problem is that when I use the browser refresh on some of the pages I see an error saying...
"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
This also happens if I hit the url directly.
An example url is...
https://tilecasev2.azurewebsites.net/profile/therichmond
However if you view pages via the homepage they work ok but only until refreshed (https://tilecasev2.azurewebsites.net).
I have the below in my index.html head...
<base href="/">
Why does this happen and how can I fix it?
HashLocationStrategy avoids the issue by including a # in all of your angular routes but doesn't really fix it.
To make angular routes without hashes work in azure the same way they do in your local development environment, you just need to configure IIS to rewrite all requests as root. This lets angular handle the routing.
To do this, add a Web.config file to your site's root folder with the following contents:
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
If you deploying in same app service plan both angular and API project then this the solution.
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^/api" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer></configuration>
for more details refer this link https://less0.github.io/azure-angular-II/
As Gunter pointed out HashLocationStrategy needed to be setup.
I followed the steps in the Angular2 docs and it all works now...
https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html
I have a AngularJS application that utilizes URL Rewriting for linking. My rewrite rule looks like :
<rewrite>
<rules>
<rule name="MainRule" 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_FILENAME}" matchType="Pattern" pattern="^api/(.*)" negate="false" />
</conditions>
<action type="Rewrite" url="Default.cshtml" />
</rule>
</rules>
I found this solution on SO: How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode? and made one modification to allow my API to pass through.
Essentially, I want to redirect all my requests to Default.cshtml EXCEPT calls to my Web API. This works GREAT when I'm I load the app on the base URL like: localhost/myapp. However, if I reload the page on a angular route like: localhost/myapp/dashboard it fails saying:
<Error><Message>No HTTP resource was found that matches the request URI 'http://localhost/myapp/dashboard'.</Message>
<MessageDetail>No type was found that matches the controller named 'dashboard'.</MessageDetail></Error>
I have a work around where I did:
<rewrite>
<rules>
<rule name="Default" stopProcessing="true">
<match url="^(?!lib|api|dist|assets|app/|bower|common|main|signalr|templates|bower_components/).*" />
<action type="Rewrite" url="Default.cshtml" />
</rule>
</rules>
</rewrite>
and it worked fine. Any ideas how I can utilize a cleaner solution above and still accomplish the rewrite?
I need to change the pattern and change {REQUEST_FILE} to {REQUEST_URI} in a couple of places. See my demo here:
<rewrite>
<rules>
<rule name="MainRule" 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}" matchType="Pattern" pattern="api/(.*)" negate="true" />
<add input="{REQUEST_URI}" matchType="Pattern" pattern="signalr/(.*)" negate="true" />
</conditions>
<action type="Rewrite" url="Default.cshtml" />
</rule>
</rules>
</rewrite>