How to serve a sitemap.xml file?

[3pleFly]

Hey guys, I was wonder if there is a way to serve a sitemap.xml file if my client tries to access /sitemap.xml .
I have tried putting the xml file in the public folder hoping it would just work but it didn't. What are my options?

Also in the coming future our project will be using a CMS, which already generates the sitemap, is there a way I can fetch a document and serve it instead of saving the xml statically?

My vite project is using react btw.

[ralphbrooks]

I have a react/ typescript/ vite project for https://fortenotary.com; this is what worked for me.

I used https://github.com/jbaubree/sitemap-ts to generate the sitemap. Here is my vite.config.ts :

import path from 'path';
import fs from 'fs';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { generateSitemap } from 'sitemap-ts';

export default defineConfig({
  plugins: [
    react(),
    {
      name: 'generate-sitemap',
      closeBundle() {
        // Read the files in the src/pages directory
        const pagesDir = path.resolve(__dirname, 'src/pages');
        const pageFiles = fs.readdirSync(pagesDir);
        
        // Generate dynamic routes from the filenames
        const dynamicRoutes = pageFiles
          .filter(file => path.extname(file) === '.tsx') // Filter TypeScript files
          .map(file => {
            const route = '/' + path.basename(file, '.tsx'); // Remove the file extension
            return route === '/home' ? '/' : route; // Handle the home page
          });

        // Generate the sitemap with dynamic routes
        generateSitemap({
          hostname: 'https://fortenotary.com/',
          outDir: path.resolve(__dirname, 'static'),
          readable: true,
          dynamicRoutes,
        });
      },
    },
  ],
  build: {
    outDir: './static',
    emptyOutDir: true,
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});