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 😂

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:

1. 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("\n")}
  ${posts
    .map(
      post => `
    <url>
      <loc>${BASE_URL}/blog/${post.slug}</loc>
      <priority>0.69</priority>
    </url>
  `
    )
    .join("\n")}
</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.

1. 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!

Comments

[Zane Milakovic]

I didn’t have to fetch the sitemap.xml as long as you have a anchor tag linking to it somewhere. Mine is in my footer. It’s pretty common practice to do this so others know you have a RSS feed.

I did something similar for my site khrome.dev

One thing the file based approach does not solve is if you use any of the dynamic routing, for example blog slugs.

So you may have to build that list separate and then manually call add those separate as you expand your site.

Really great write up though!

[Younes]

You taught me something, thank you 😄 !

PS: Your website looks very nice !

[KevinConti]

Thanks for this post!

I found that I wasn't able to implement this using a Svelte store. I use svelte-apollo to access my db, and what gets returned from the function is a store which seems not to play well with the sapper side of things...

Thankfully, I found a workaround, since I have another db that replicates the data I need (Algolia for search).

Here's a link to my implementation if anyone wants to see!

app.codernotes.io/notes/creating-s...

[Null]

Amazing!

[Babacar Cisse DIA]

I should add this as well to my website! thanks for sharing

[Younes]

my pleasure 😋