How to generate /sitemap.xml route in Remix framework

According to google.com

A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently.

Fir…

According to google.com

A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently.

First of all we are going to need the help of this very powerful package named Remix SEO. So, install it by using the following command.

npm i @balavishnuvj/remix-seo

Then make a new file named sitemapRoutes.server.ts within our app/ directory. After creating the file paste the following code there.

import type { EntryContext } from "@remix-run/node";
import { generateSitemap } from "@balavishnuvj/remix-seo";

const siteUrl =
  process.env.ENVIRONMENT === "production"
    ? "https://yourProductionWebsiteUrl.com"
    : "http://localhost:3000";

type Handler = (
  request: Request,
  remixContext: EntryContext
) => Promise<Response | null> | null;

export const otherRootRoutes: Record<string, Handler> = {
  "/sitemap.xml": async (request, remixContext) => {
    return generateSitemap(request, remixContext, {
      siteUrl,
    });
  },
};

export const otherRootRouteHandlers: Array<Handler> = [
  ...Object.entries(otherRootRoutes).map(([path, handler]) => {
    return (request: Request, remixContext: EntryContext) => {
      if (new URL(request.url).pathname !== path) return null;

      return handler(request, remixContext);
    };
  }),
];

That’s it for the sitemapRoutes.server.ts file. Now head to the entry.server.tsx file in the app/ directory and make the following changes there:

import type { EntryContext } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
+ import { otherRootRouteHandlers } from "./sitemapRoutes.server";


- export default function handleRequest(
+ export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
+  for (const handler of otherRootRouteHandlers) {
+    const otherRouteResponse = await handler(request, remixContext);
+    if (otherRouteResponse) return otherRouteResponse;
+  }
  const markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

and now you’re done! Congratulations you did it 😉
Now you just have to goto http://localhost:3000/sitemap.xml link and you’ll see the sitemap generated like this:

sitemap.xml


Print Share Comment Cite Upload Translate
APA
Burhan Haroon | Sciencx (2024-03-28T14:34:16+00:00) » How to generate /sitemap.xml route in Remix framework. Retrieved from https://www.scien.cx/2022/07/20/how-to-generate-sitemap-xml-route-in-remix-framework/.
MLA
" » How to generate /sitemap.xml route in Remix framework." Burhan Haroon | Sciencx - Wednesday July 20, 2022, https://www.scien.cx/2022/07/20/how-to-generate-sitemap-xml-route-in-remix-framework/
HARVARD
Burhan Haroon | Sciencx Wednesday July 20, 2022 » How to generate /sitemap.xml route in Remix framework., viewed 2024-03-28T14:34:16+00:00,<https://www.scien.cx/2022/07/20/how-to-generate-sitemap-xml-route-in-remix-framework/>
VANCOUVER
Burhan Haroon | Sciencx - » How to generate /sitemap.xml route in Remix framework. [Internet]. [Accessed 2024-03-28T14:34:16+00:00]. Available from: https://www.scien.cx/2022/07/20/how-to-generate-sitemap-xml-route-in-remix-framework/
CHICAGO
" » How to generate /sitemap.xml route in Remix framework." Burhan Haroon | Sciencx - Accessed 2024-03-28T14:34:16+00:00. https://www.scien.cx/2022/07/20/how-to-generate-sitemap-xml-route-in-remix-framework/
IEEE
" » How to generate /sitemap.xml route in Remix framework." Burhan Haroon | Sciencx [Online]. Available: https://www.scien.cx/2022/07/20/how-to-generate-sitemap-xml-route-in-remix-framework/. [Accessed: 2024-03-28T14:34:16+00:00]
rf:citation
» How to generate /sitemap.xml route in Remix framework | Burhan Haroon | Sciencx | https://www.scien.cx/2022/07/20/how-to-generate-sitemap-xml-route-in-remix-framework/ | 2024-03-28T14:34:16+00:00
https://github.com/addpipe/simple-recorderjs-demo