Sitemap With Create React App

cra-sitemap1.js

import { sitemapBuilder as buildSitemap } from 'react-router-sitemap';
import routes from '../routes';
import path from 'path'; // add path which will be needed for file write
import fs from 'fs'; // import file system object

// use your website root address here. Optimally you can
// include dev and production enviorenments with variable
const hostname = 'http://localhost:3000';

// define our destination folder and sitemap file name
const dest = path.resolve('./public', 'sitemap.xml');

// Generate sitemap and return Sitemap instance
const sitemap = buildSitemap(hostname, routes);

// write sitemap.xml file in /public folder
// Access the sitemap content by converting it with .toString() method
fs.writeFileSync(dest, sitemap.toString())

cra-sitemap2.js

import { sitemapBuilder as buildSitemap, paramsApplier as applyParams } from 'react-router-sitemap'; // import applyParams for paths pattern
import routes from '../routes';
import path from 'path'; // add path which will be needed for file write
import fs from 'fs'; // import file system object

// use your website root address here. Optimally you can
// include dev and production enviorenments with variable
const hostname = 'http://localhost:3000';

// define our destination folder and sitemap file name
const dest = path.resolve('./public', 'sitemap.xml');

// Retrieve the post titles array ['post-title-1', 'post-title-2', ...]
const posts = getPostsForSitemap();

// Replace :slug with post titles
const config = {
	'/post/:slug': [
    	{ slug: posts },
    ],
};
	
// Merge our route paths with config pattern    
const paths = applyParams(routes, config);

// Generate sitemap and return Sitemap instance
// paste new paths constant with hostname
const sitemap = buildSitemap(hostname, paths);

// write sitemap.xml file in /public folder
// Access the sitemap content by converting it with .toString() method
fs.writeFileSync(dest, sitemap.toString())

cra-sitemap3.js

import {createSitemap } from 'sitemap'; // import createSitemap
import routes from '../routes';
import path from 'path'; // add path which will be needed for file write
import fs from 'fs'; // import file system object

// use your website root address here. Optimally you can
// include dev and production enviorenments with variable
const hostname = 'http://localhost:3000';

// define our destination folder and sitemap file name
const dest = path.resolve('./public', 'sitemap.xml');

const paths = []; // we will append links here

// we will loop through our routes to extract paths 
// and other params
routes.map((route, index) => {
	// get 	path, and changefreq, priority from current route
	const {path, changefreq, priority} = route;

	let currentPath = {
		url: path // we need to pass url parameter to build sitemap
	}

   // if we are in post route, loop through posts
   // and add them to the paths
	if ( path === '/post/:slug' ) {
		posts.map(post => {
      
			// adjust the values for your data
			// each post inherits changefreq and priority
			// from global /post route
			paths.push({
				url: post.url, 
				lastmod: post._modified,
				changefreq,
				priority
			})
		});
			
    // prevent further code execution;    
		return;
	}
	
  // for other routes use regular data
	if ( changefreq ) currentPath.changefreq = changefreq;
	if ( priority ) currentPath.priority = priority;

	paths.push(currentPath);
});
	
const sitemap = createSitemap({
	hostname,
	urls: paths
}) 

// write sitemap.xml file in /public folder
// Access the sitemap content by converting it with .toString() method
fs.writeFileSync(dest, sitemap.toString())