How to Generate a Sitemap for Your Create-React-App Web Application

Last updated on 16 Feb, 2023

As a web developer, it is crucial to ensure that your web application is easily crawlable by search engines. One way to achieve this is by creating a sitemap for your web application. In this article, we will discuss how to generate a sitemap for a create-react-app web application.

What is a Sitemap?

A sitemap is a file that contains a list of all the pages on your website. It helps search engines understand the structure of your website, and makes it easier for them to crawl and index your pages.

How to Generate a Sitemap for a Create-React-App Web Application

1. Install the "sitemap" package: To create a sitemap, we will need to use a third-party package. In this case, we will be using the "sitemap" package. To install the package, open the terminal and navigate to the root directory of your create-react-app web application. Then run the following command:

npm install --save sitemap

2. Create a sitemap.js file: Next, create a new file named "sitemap.js" in the src directory of your create-react-app web application. This file will contain the logic to generate the sitemap.

3. Define your sitemap configuration: In the sitemap.js file, we will define our sitemap configuration. The configuration will include the URL of our website and an array of objects that contain the URL and other optional parameters for each page on our website. Here's an example configuration:

    const sitemap = require('sitemap');
    const hostname = '';

    const urls = [
      { url: '/', changefreq: 'daily', priority: 1 },
      { url: '/about', changefreq: 'monthly', priority: 0.8 },
      { url: '/contact', changefreq: 'monthly', priority: 0.8 },
      // Add additional pages here

    const sitemapInstance = sitemap.createSitemap({

4. Generate the sitemap: After defining the configuration, we can generate the sitemap by calling the "toXML" method on our sitemapInstance. This will return the sitemap as an XML string. Here's an example of how to generate the sitemap:

    const fs = require('fs');

    // Write sitemap to public directory
    fs.writeFileSync('./public/sitemap.xml', sitemapInstance.toString());

5. Update your robots.txt file: Finally, we need to update our robots.txt file to include the location of our sitemap. Add the following line to your robots.txt file:



By following these steps, you can easily generate a sitemap for your create-react-app web application. Remember to update your sitemap whenever you add or remove pages from your website, and submit it to search engines to improve the crawlability and indexing of your web application.

about author

Hitesh Agja

I am Hitesh Agja, and I have 12+ years of industry experience. I am always excited and passionate about learning new things, technical or not. Life is all about learning new things and making the world more progressive.

Let's talkhire -button