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_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.

Contact us