Pre-render - the two config files you need to get prerender.io working with Azure App Services
by Brett Andrew 15th April 2021
The internet has some info about how to setup prerender.io with IIS, but not enough about Azure App Services. Here is how to do it.
First create a file called applicationHost.xdt and put the following in it. This basically enables Url Rewriting in your app, which you need for prerender.io
Important : This file needs to sit in the \site folder (one folder below the \site\wwwroot folder). Access the folder via FTP and upload it. Filezilla or Free file sync are good tools if you need one.
If you are using AZURE FRONT DOOR, then see my new blog entry on AZURE FRONT DOOR AND PRERENDER.IO - it has some extra steps as the host name needs to be stitched together and passed through to Prerender.io
<?xml version="1.0"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
<system.webServer>
<proxy xdt:Transform="InsertIfMissing" enabled="true" preserveHostHeader="false"
reverseRewriteHostInResponseHeaders="false" />
<cache enabled="false" />
<rewrite>
<allowedServerVariables>
<add name="HTTP_X_PRERENDER_TOKEN" xdt:Transform="InsertIfMissing" />
</allowedServerVariables>
</rewrite>
</system.webServer>
</configuration>Then in your web.config file, add this somewhere within the <system.webServer> tags of your web.config file and put your own prerender.io token in the <your token> section.
<rewrite>
<rules>
<!--Deploy any web.config changes manually to the REACT app servers -->
<!--generic rule for pre-render.io -->
<rule name="Prerender.io rewrite rule" stopProcessing="true">
<match url="(\.js|\.json|\.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|\.ttf|\.woff|\.svg)" negate="true" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_USER_AGENT}" pattern="googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp" />
<add input="{QUERY_STRING}" pattern="_escaped_fragment_" />
</conditions>
<serverVariables>
<set name="HTTP_X_PRERENDER_TOKEN" value="<your token>" />
</serverVariables>
<action type="Rewrite" url="https://service.prerender.io/https://{HTTP_X_FORWARDED_HOST}{REQUEST_URI}" logRewrittenUrl="true" />
</rule>
</rules>
</rewrite>You need to restart the app service for this to take effect, make sure the site is unavailable and then reloads or your testing is in vein.
So some things that are different compared to others, the cache is turned off on the .xdt file, seems that without this the previous settings stick around far too long. Once you get this working you should be able to remove that (in theory, untested).
The other thing I added here was to ensure that the site being sought on prerender was SSL (the code provided was http:// not https:// so I changed that).
Good luck!
Leave thanks, comments or improvements via the contact us form.
Questions (send us a comment or question here)
19/06/2023 Sahil asked, will this work with Azure Application Gateway
I suspect that Azure Application Gateway would be very similar to Azure Front Door. Azure Front Door is already configured to redirect with Forward-For headers and the Application Gateway does the same:
“Application gateway inserts six additional headers to all requests before it forwards the requests to the backend. These headers are x-forwarded-for, x-forwarded-port, x-forwarded-proto, x-original-host, x-original-url, and x-appgw-trace-id. The format for x-forwarded-for header is a comma-separated list of IP:port.” Source https://learn.microsoft.com/en-us/azure/application-gateway/how-application-gateway-works
This above Azure Front Door example therefore should work exactly the same, ensure you follow the step to add this file applicationHost.xdt on this page:
https://www.formition.com/blog/azure-app-front-door-prerenderio
Powered by mition