Firebase Integration Guide
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:
Prerender Token Location:
You can find the integration's source code on this link.
Text guide:
-
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. -
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. -
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.
-
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.
-
Deploy Cloudflare Worker for Prerender
Click on Workers & Pages
-
Create a new worker
-
- Open your Cloudflare Dashboard and click on Compute(Workers) and select Workers & Pages on the left side
- Then click on Create on the Worker Overview page.
- Then click on the "Create Worker" button.
- Give your worker a descriptive name. e.g.: prerender-worker
- Click on the Deploy button at the bottom right to initialize the worker.
- Open your Cloudflare Dashboard and click on Compute(Workers) and select Workers & Pages on the left side
7. Add the Prerender worker's code
-
- Click on "Edit Code"
- Replace the example code with the worker's source code
Copy the Cloudflare worker's source code from this link. - Save the changes by clicking on Deploy.
- Click on "Edit Code"
8. Configure the worker
-
- Step back to the previous interface by clicking on your worker's name on the top left.
- Step back to the previous interface by clicking on your worker's name on the top left.
-
- Go to Settings and add the zone and routes for your site.
- Click on +Add at Domains & Routes
- Go to Settings and add the zone and routes for your site.
-
- Select route
- Select route
-
- Add a Route pattern that matches your site and select the Zone where your site is located.
Examples of the Route setting:
- Add a Route pattern that matches your site and select the Zone where your site is located.
Website Address Type | Route Pattern |
---|---|
example.com | example.com/* |
www.example.com | www.example.com/* |
Both with/without www | *example.com/* |
Any subdomain | *.example.com/* |
Specific subdomain | blog.example.com/* |
Multiple subdomains | (sub1|sub2).example.com/* |
-
- You can add a route specific to your subdomain. If you want to test Prerender on just one of your domains or subdomains, you can add another route to the worker later.
- You can add a route specific to your subdomain. If you want to test Prerender on just one of your domains or subdomains, you can add another route to the worker later.
-
- Select Failure more:
- Click on Add Route to save the setting.
- Select Failure more:
9. Add the Prerender token as an Environment Variable.
-
- Next to Variables and Secrets, click on +Add
- Next to Variables and Secrets, click on +Add
-
- Copy your Prerender token from your dashboard
Add your Prerender.io Token from the Security and Access menu.
- Copy your Prerender token from your dashboard
-
- Add a text variable named "PRERENDER_TOKEN" and set its value to the token from your dashboard. Then, click Deploy.
- Add a text variable named "PRERENDER_TOKEN" and set its value to the token from your dashboard. Then, click Deploy.
It might take a couple of minutes for the integration to start working after the final deployment.
Verify Your Installation
After integration, it’s important to verify that everything is working as expected. We’ve provided an easy-to-follow guide to help you test your setup and confirm that Prerender is functioning properly.
Is the Prerender integration working on other pages?
Test if the Prerender integration works on the other pages based on this guide: Verify the integration
If you don't see the Prerender headers / IDs, then the Integration is not working, which might be why the other URL is not cached
Getting an Error?
If you see the message "Prerender Integration Not Detected," you can refer to the troubleshooting guide here to help resolve the issue.
Expert Assistance
For those who need additional help or want to ensure a smooth and secure launch, we offer a specialized package:
Kickstart Package
Price: $800 (one-time payment)
This one-time package empowers you with expert setup and configuration, ensuring a smooth and secure launch.
Features:
- Three setup and configuration sessions with our experts
- Onboarding assistance
- Security assessment
To learn more about this package or to purchase, visit the Packages section under the Billing menu in your Prerender dashboard.
Get Support
If you're still encountering issues after implementing Prerender:
- Review your implementation against our documentation
- Contact our support team:
- Email: support@prerender.io
- Support Ticket: Submit a ticket
- Chat: Available from your Prerender dashboard
To help us resolve your issue as quickly as possible, please gather and include any relevant information, such as:
- Error messages you're seeing
- Steps you've already taken to troubleshoot
- Screenshots or screen recordings (if applicable)
Providing these details up front will help our team diagnose the problem more efficiently and get you back on track faster.
Related Articles / FAQs: