DEV Community

Cover image for How to render your sitemap.xml file in your Svelte/Sapper blog
Younes
Younes

Posted on • Updated on • Originally published at blog.yafkari.dev

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
Enter fullscreen mode Exit fullscreen mode

With Webpack:

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

cd YOUR_APP_NAME
npm i

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Default homepage of a svelte project

  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);
}

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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!

Top comments (6)

Collapse
 
khrome83 profile image
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!

Collapse
 
yoadev profile image
Younes

You taught me something, thank you πŸ˜„ !

PS: Your website looks very nice !

Collapse
 
kevinconti profile image
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...

Collapse
 
nullcano profile image
Null

Amazing!

Collapse
 
bcdbuddy profile image
Babacar Cisse DIA

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

Collapse
 
yoadev profile image
Younes

my pleasure πŸ˜‹