Contents x
    Cloudflare Integration for ESM Syntax
    • 19 Feb 2024
    • 1 Minute to read
    • Contributors
    • Print
    • Dark
      Light
    • PDF
    Contents

    Cloudflare Integration for ESM Syntax

    • Updated on 19 Feb 2024
    • 1 Minute to read
    • Contributors
    • Print
    • Dark
      Light
    • PDF
    Article Summary

    This integration is for the ESM javascript syntax in CloudFlare workers. Follow this guide below to integrate Prerender with Cloudflare. 

    It only works in proxy mode.
    This integration will only work if Cloudflare is set up as your proxy. 
    Disable Automatic Signed Exchange (SXGs) in Cloudflare

    If you keep the SXGs option enabled, Cloudflare will display the cached version of your website pages to users who click on the page link on the search engine result pages.
    However, keep in mind that Prerender is meant to create a static HTML file for search bots, so the rendered version may not be as responsive.
    To avoid this issue we highly recommend disabling this setting in Cloudflare.

    You can turn off Automatic Signed Exchanges by going to Speed -> Optimization -> Other (tab) in Cloudflare settings.

    Video guide:


    Copy the Cloudflare worker's source code from this link from here.


    Text guide:

    1. Open your Cloudflare Dashboard and click on Workers & Pages on the left side

    Click on Workers & Pages on the left side

    2. Click on Create Worker

    Click on Create Worker

    3. Give your worker a name.

    Give your worker a name.

    4. Click on the Deploy button at the bottom right. 

    Click on the Deploy button at the bottom right.

    5. Click on Edit code

    Click on Edit code

    6. Replace the example code with the worker's source code

    # Copy the Cloudflare worker's source code from this link.

    Replace the example code with the worker's source code

    7. Click on Save and deploy

    Click on Save and deploy

    8. Click on Save and deploy again in the pop-up modal

    Click on Save and deploy again in the pop-up modal

    9. Step back to the previous interface by clicking on the name of your worker on the top left. 

    Step back to the previous interface by clicking on the name of your worker on the top left.

    10. Click on Triggers

    Click on Triggers

    11. Click on Add route

    Click on Add route

    12. Type in your domain like this *example.com/*

    Type in your domain like this *example.com/*

    13. Select the Zone where your site is.

    Select the Zone where your site is.

    14. Click on Add route

    Click on Add route

    15. Click on the Settings 

    Click on the Settings

    16. Select Variables on the left side. 

    Select Variables on the left side.

    17. Click on Add a Variable

    Click on Add a Variable

    18. Copy your Prerender token from your dashboard

    You can find it at the top left on your Prerender dashboard.

    Copy your Prerender token from your dashboard

    19. The name of the variable should be "PRERENDER_TOKEN"
    and the value should be the token you copied from your dashboard. Then click on Save and deploy

    The name of the variable should be "PRERENDER_TOKEN" and the value should be the token you copied from your dashboard. Then click on Save and deploy


    Was this article helpful?
    What's Next