Setting Up Sitemap Generation

1. Create a New File: In your React project directory, create a new file named sitemap.js.
2. Copy and Paste Code: Copy the provided code snippet and paste it into the sitemap.js file.
3. Adjust File Paths: Ensure that the file paths in the code are correct and match the structure of your React project. The code assumes that App.js is located in the src directory and that the sitemap will be generated in the public directory.
4. Modify Website URL: Update the website URL in the sitemap function to match your actual website domain. This ensures that the generated sitemap contains the correct URLs.

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const sitemap = () => {
  const app = fs.readFileSync(path.join(__dirname, "/src/App.jsx"), "utf8");

  // Match all route patterns including nested routes
  const routePattern = /<Route\s+path=["']([^"']+)["']\s+element=\{[^}]*\}/g;
  const routes = [];
  let match;

  while ((match = routePattern.exec(app)) !== null) {
    routes.push(match[1]);
  }

  // Remove duplicates and sort
  const uniqueUrls = [...new Set(routes)].sort();

  const sitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${uniqueUrls
  .map(
    (url) => `  <url>
    <loc>https://www.redsols.com${url}</loc>
    <changefreq>weekly</changefreq>
    <priority>${url === "/" ? "1.0" : "0.8"}</priority>
    <lastmod>${new Date().toISOString().split("T")[0]}</lastmod>
  </url>`
  )
  .join("\n")}
</urlset>`;

  fs.writeFileSync(path.join(__dirname, "/public/sitemap.xml"), sitemapContent);
  console.log(`✓ Sitemap generated with ${uniqueUrls.length} URLs`);
};

sitemap();

Running the Sitemap Generator

To generate the sitemap, users can follow these steps:

1. Open Terminal: Navigate to your project directory using the terminal or command prompt.
2. Run Sitemap Script: Execute the sitemap generation script by running the command node sitemap.js

Integrating into Build Process (Optional)

For convenience, you can also integrate the sitemap generation into your build process. This ensures that the sitemap is updated automatically whenever the project is built or deployed.

Conclusion

By following these steps, you can easily set up a dynamic sitemap generation process for your React application. This ensures that your website's sitemap is always up-to-date, improving SEO and ensuring that search engines can effectively crawl and index your content.