Skip to content
Last update: January 30, 2024

Setting Up with Azure Application Gateway is a valuable tool for optimizing your website's SEO performance by rendering JavaScript content for search engine crawlers.

Readmore Enhancing SEO with

In this guide, we will walk you through the process of setting up with Azure Application Gateway for our single page application using the Azure Portal.



  • Azure account with an active subscription.
  • token. Sign up to get your token.


Create Application Gateway

Create the application gateway using the tabs on the Create application gateway page:

  1. Click Create a resource from the Azure portal menu or from the Home page.
  2. Under Categories, select Networking, and then select Application Gateway from the Popular Azure services list.

Basics tab

In the Basics tab:

  1. Choose a unique name for the Application Gateway.
  2. Select a region.
  3. Select an SKU based on your requirements.

    The basic settings of selecting a resource group, naming the application gateway, and selecting a VNET subnet are as follows:

    Create Gateway

  4. Click Next:Frontends.

Frontends tab

In the Frontends tab:

  1. Select or create the Public IP Address to be assigned to this gateway.
  2. Under the Frontend IP configuration section, create or select the existing IP configuration.


  3. Click Next:Backends.

Backends tab

In the Backends tab:

  1. Click Add a backend pool. In this case, we will add two sample backend pools.
  2. Add a pool for the Fill in the fields as follows, then click Add:

    Add pool 1

  3. Add a pool for our downstream frontend which runs as a single page application written in Vue.js. This pool will be used to forward all requests for static theme resources directly to the downstream service, bypassing Fill in the fields as follows, then click Add:

    Add pool 2

  4. The added pools appear in the list:


  5. Click Next:Configuration.

Configurations tab

Manage Configuration to connect the frontend and backend pool you created using a routing rule:

  1. Click Add a routing rule in the Routing rules column. A single routing rule (path-based) that will forward by default all incoming requests to the by default and all requests to the static resources with the paths matching this pattern /static/*,/themes/* directly to
  2. In the new window, fill in the fields in the Listener tab. Fill in the fields as follows and switch to the Backend targets tab:

    Parameter Value
    Listener name Enter https_listener for the name of the listener
    Frontend IP Select Public to choose the public IP you created for the frontend
    Other settings Accept the default values


    Specify the existing SSL certificate, which was issued for your public domain. In our case, we use an RSA certificate (.pfx) issued by the ZeroSSL service for the domain

  3. In the Backend targets tab, fill in the fields as follows:

    Parameter Value
    Rule name Enter routing_rule for the name of the rule
    Backend target Select as default backend pool for rule

    Backend targets

  4. For the Backend Settings, click Add new. The Backend settings determine the behavior of the routing rule. In the Add Backend setting window that opens, enter https_backend_setting for the Backend settings name and select Https as backend protocol. Use 443 for the Backend port.
    Then select Yes for the Override with new host name option and select Pick host name from backend target radio button. Select No option for Create custom probes:

    Backend settings

  5. Click Save to return to the Add a routing rule window.

  6. In the Backend targets tab, click Add multiple targets to create a path-based rule. Fill in the fields as follows:


    The path appears in the paths section, and the rule looks as follows:


  7. In the Add a routing rule window, click Add to save the routing rule and return to the Configuration tab.

  8. Click Next:Tags to manage tags. Then click Next: Review + Create.

  9. Review your configurations and click Create to deploy the Application Gateway.

Configure URL rewrite to forward requests to

Configure the UrlRewrite rules to redirect all incoming GET requests from a public IP to


When a customer requests, our rewrite rule redirects and rewrites this request to and adds an X-Prerender-Token header with our auth token value to authorize these requests in the service.

  1. Select All resources, then select your recently created application gateway (app-gateway) from the list.
  2. Select Rewrites in the left panel, then click + Rewrite set:


  3. Rewrite rule configuration:


  4. Add a rule to add the X-prerender-token header to every request:

    Rule 1

  5. Before sending all incoming requests to the backend url, add a rule to rewrite the path for them according to this pattern: /{var_uri_path}.


    The incoming request to the public url will be redirected to after processing this rule.

    Rule 2

Verify result

Verify the result by navigating to The original home page should be open:


Examine the source code of the page to ensure that it has been pre-rendered by the server, eliminating the render-blocking delays typical of SPA applications. We'll set up a reverse proxy that passes all requests indiscriminately, without distinguishing between real users and web crawlers. However, this approach is not suitable for production scenarios. To refine the configuration and ensure that the pre-rendered version of the site is used exclusively by crawlers, additional URL rewrite rules must be included in the Application Gateway routing. These rules will inspect the user-agent header to see if it matches one of the specified values, such as googlebot, bingbot, etc. Requests will then be routed to only for these identified crawler requests.

Configure to pre-render site for crawlers only

To pre-render site for crawlers only:

  1. Open routing_rule for editing:

    1. For Backend target, select Now the AGW forwards all requests to the original site by default.
    2. Add new path based rule:
    Parameter Value
    Path /*
    Target name
    Backend settings https_listener
    Backend target

    Rule 3

    The resulting routing rule should be as follows:


  2. Update the rewrite rule to forward requests to the service only if the User-Agent in the header matches one of the predefined values for crawlers:

    1. Navigate to Rewrites and open the prerender-rewrite-set rewrite rule for editing.
    2. Add a new condition with the following content. Use the following regular expression as the match pattern for the User-Agent header:

      (googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp|redditbot|applebot|flipboard|tumblr|bitlybot|skypeuripreview|nuzzel|discordbot|google\ page\ speed|qwantify|bitrix\ link\ preview|xing-contenttabreceiver|chrome-lighthouse|telegrambot|google-inspectiontool)

      New condition

    3. Check the Re-evaluate path map for the last action in the rule set:


      The resulting rewrite rule should be as follows:


  3. After applying the changes, check the result. To simulate crawler requests, use Postman, set the User-Agent header to googlebot, and check that the result contains the pre-rendered version of the page.


Wrapping up

This tutorial provides an overview of the steps involved in creating a reverse proxy using Azure Application Gateway to make your single-page application SEO-friendly by using Prerender Seamlessly Renders JavaScript for Faster Indexing for efficient rendering. Following these steps, we will deploy a public proxy, accessible by the URL, that will forward requests to using the prerendering capabilities provided by the service.