How to render your sitemap.xml file in your Svelte/Sapper blog
Tags: svelte, beginners, tutorial, javascript
Published: 2020-01-19 11:36:14

---
title: How to render your sitemap.xml file in your Svelte/Sapper blog
published: true
description: A tutorial explaining you how to deliver a sitemap.xml file in Svelte/Sapper blog.
tags: svelte, beginners, tutorial, javascript
cover_image: https://media.giphy.com/media/2kNyLY42v4rxjBoDJW/source.gif
canonical_url: https://blog.yafkari.dev/blog/how-to-render-your-sitemap-xml-file-in-your-svelte-sapper-blog-2joh
---

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](https://blog.yafkari.dev/) 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:
```javascript
npx degit "sveltejs/sapper-template#rollup" YOUR_APP_NAME

cd YOUR_APP_NAME
npm i

npm run dev
```

With Webpack:
```javascript
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](http://localhost:3000) and it should look like the image below:

![Default homepage of a svelte project](https://thepracticaldev.s3.amazonaws.com/i/j3dddto1zsp2qyhqy1ym.png)

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 :

```javascript
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](https://gist.github.com/yafkari/05816ba6805de0384c22e070fc321baf) 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`

```javascript
<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!