Skip to content

Instantly share code, notes, and snippets.

@zutigrm
Last active April 16, 2023 02:00
Show Gist options
  • Save zutigrm/01dd660f8efba3c18ac9c65111069c6f to your computer and use it in GitHub Desktop.
Save zutigrm/01dd660f8efba3c18ac9c65111069c6f to your computer and use it in GitHub Desktop.
Sitemap With Create React App
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())
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())
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())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment