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

    Cloudflare Integration for ESM Syntax

    • Updated on 31 Oct 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:


    Prerender token 
    The location of the Prerender token has changed. You can find it under the Security and Access menu under Prerender Token.

    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

    2. Click on Create on the Worker overview page

    Then click on the Create worker button

    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

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

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

    7. Click on Deploy

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

    9. Click on Settings

    10. Next to the Domains & Routes, click on +Add

    11. Select Route

    12. Type in your domain like this: *example.com/* and Select the Zone where your site is.

    13. Click on Add route

    Click on Add route

    14. Next to Variables and Secrets, click on +Add

    15. Copy your Prerender token from your dashboard

    Add your Prerender.io Token from the Security and Access menu.

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


    Was this article helpful?
    What's Next