Contents x
    Firebase
    • 27 Feb 2024
    • 1 Minute to read
    • Contributors
    • Print
    • Dark
      Light
    • PDF
    Contents

    Firebase

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

    This guide will guide you on integrating Prerender with your Firebase Hosting project using Cloudflare as a proxy on the domain and then implementing a Cloudflare worker.


    Video guide:


    You can find the integration's source code on this link.

    Text guide:

    1. Begin by integrating Cloudflare with your domain. 
    This requires you to go to your domain registrar's DNS settings, remove the existing name servers, and replace them with the ones provided by Cloudflare.
    Access the DNS menu in Cloudflare to find the necessary name servers.

    2. Update DNS Records in Cloudflare

    Save your changes in Cloudflare, then add the DNS records we get from Firebase.
    Navigate to Firebase, select your project, and add your domain as a custom under Build -> Hosting menu point. Add the A and TXT records provided by Firebase to Cloudflare, ensuring the proxy status is enabled for the A record.

    3. Verify Domain with Firebase

    After adding the DNS records, use Firebase's "Verify" option to confirm the setup. The DNS update process may take a few minutes, so feel free to proceed with the next steps. 

    4. Configure Additional Domains

    If you have a www version of your domain, then add that also to Firebase,  and add a corresponding CNAME record provided by the Firebase dashboard in Cloudflare for www, ensuring the proxy status is enabled, and then save your changes.

    5. Deploy Cloudflare Worker for Prerender

    Click on Workers & Pages 

    Click on Workers & Pages on the left side

    Click on Create Worker



    Give the worker a name and edit the code.

    Copy the source code from the link below and replace the default code. 

    Cloudflare worker source code.

    Save and deploy the updated worker code.


    6. Configure Worker Triggers and Variables

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

    Click on triggers, then Add route, select the zone your domain is on, and add your domain as *.example.com/* or *example.com/* if you don't use subdomains.

     

    Go to Settings and Add an environment variable named `PRERENDER_TOKEN` in the worker settings with your Prerender token as its value.

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

    Click on Save and Deploy

    7. Test the Integration

    Visit your page, change the user agent to Googlebot, and refresh. If you see the Prerender request ID, the integration is successfully working.
    Guide for testing

    Was this article helpful?
    What's Next