How to render your sitemap.xml file in your Svelte/Sapper blog

Hello everyone, I hope you're all doing well !

Today, I will show you a quick solution to render your sitemap.xml on your svelte/sapper blog.

I came up with the idea of presenting you this solution because it took me a while to find it yesterday and I thought it would help many people.

I'm currently working on my personal blog where I will repost articles from DEV but also other subjects like crypto, books, ... and everything that go through my head ^^.

It's my first web project that is finally online and I'm very proud of it. If you could give me your opinion it would be nice!

UPDATE 02-2022: The blog is still under development but the website is done ^^

The website is pretty empty for now, but that's just the beginning and I'm still learning svelte, so be kind with me :joy:

So, let's get back to our subject.

I'm not a Svelte expert at all, I'm still learning actually. So, if you have questions I will probably not be able to give a sufficient answer. Apologize.

1. Create the project

If you already have a project you can skip this step.

Firstly, we will create our svelte project with the sapper template. You can choose to use Webpack or Rollup, the manipulation is the same.

With Rollup:

npx degit "sveltejs/sapper-template#rollup" YOUR_APP_NAME

cd YOUR_APP_NAME
npm i

npm run dev

With Webpack:

npx degit "sveltejs/sapper-template#webpack" YOUR_APP_NAME

cd YOUR_APP_NAME
npm i

npm run dev

If everything went well, you should be able to navigate to http://localhost:3000 and it should look like the image below:

2. Creating the sitemap.xml file

For now, I wil assume that you have some basics of sapper and you know and understand the structure of a project.

So to add the sitemap.xml file you will have to create a sitemap.xml.js in your src/routes/ directory.

Here is the content of that new file :

import posts from "./blog/_posts";
const fs = require('fs');

const BASE_URL = "https://www.blog.yafkari.dev";
const pages = [""];

fs.readdirSync("./src/routes").forEach(file => {
  file = file.split('.')[0];
  if (file.charAt(0) !== '_' && file !== "sitemap" && file !== "index") {
    pages.push(file);
  }
});

const render = (pages, posts) => `<?xml version="1.0" encoding="UTF-8" ?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  ${pages
    .map(
      page => `
    <url><loc>${BASE_URL}/${page}</loc><priority>0.85</priority></url>
  `
    )
    .join("
")}
  ${posts
    .map(
      post => `
    <url>
      <loc>${BASE_URL}/blog/${post.slug}</loc>
      <priority>0.69</priority>
    </url>
  `
    )
    .join("
")}
</urlset>
`;

export function get(req, res, next) {
  res.setHeader("Cache-Control", `max-age=0, s-max-age=${600}`); // 10 minutes
  res.setHeader("Content-Type", "application/rss+xml");

  const sitemap = render(pages, posts);
  res.end(sitemap);
}

You can download the file here on Github.

In the first part of the file, we get all the routes of our project dynamically, after doing that we actually start creating the xml content.

Finally we render the xml we generated previously.

3. x

You will also have to add this piece of code at the top of your src/routes/index.svelte

<script context="module">
  export function preload({ params, query }) {
    return this.fetch("sitemap.xml");
  }
</script>

This piece of code is here to make sure that the sitemap.xml is rendered during export.

Pretty simple, but as a beginner with svelte, It's a bit difficult to find the way to do it.

I hope this short tutorial has taught you something and saved you some time.

See you next time!