How to Serve a Dynamic Sitemap in a React App with Separate Backend

In this post, we'll see how to serve a dynamic sitemap from a backend server in a React frontend application—especially when the frontend and backend are deployed separately.

This approach ensures that your sitemap is accessible at the frontend domain (e.g., https://frontend-domain.xyz/sitemap.xml), even though it's generated and hosted on the backend (e.g., https://backend-domain.xyz/sitemap.xml).

Step-by-Step Guide

Step 1: Create a Sitemap Endpoint on the Backend

Make sure your backend exposes a properly formatted sitemap.xml file via an endpoint.

GET https://backend-domain.xyz/sitemap.xml

This endpoint should return a fully structured XML response that complies with the sitemap protocol.

Step 2: Access Your Frontend Hosting Platform

For example, if you're using AWS Amplify, go to the dashboard of your frontend application.

This also applies to platforms like Vercel, Netlify, Cloudflare Pages, etc.

Step 3: Set Up Redirects or Rewrites

Find the section in your hosting dashboard where you can manage redirects or rewrites.

Step 4: Add a Rewrite Rule for /sitemap.xml

Create a rule that proxies the sitemap request from the frontend to the backend. In AWS Amplify, it might look like this:

{
  "source": "/sitemap.xml",
  "target": "https://backend-domain.xyz/sitemap.xml",
  "status": "200",
  "condition": null
}

This tells Amplify to serve the sitemap from the backend when someone accesses:

https://frontend-domain.xyz/sitemap.xml

Final Result

Your dynamic sitemap is now accessible from your frontend domain, even though it's hosted by the backend.

Points to Remember

1. Avoid Conflicts: Ensure no other routing or server configurations interfere with /sitemap.xml requests.
2. Search Engine Visibility: A proper sitemap helps search engine crawlers index your site more effectively.
3. SEO Tip: Include metadata like title, slug, and summaries for each page in your sitemap if possible.

Keep Coding 🔥