DEV Community: Marc Frame

Hosting sveltekit on AWS Amplify

Marc Frame — Tue, 17 May 2022 03:00:19 +0000

If you are using the @sveltejs/adapter-static this might come in handy!

Go to the AWS Amplify project, in the side bar click App settings: Rewrites and redirects, Edit, Open Text Editor and paste the following.

[
    {
        "source": "</^[^.]+$|\\.(?!(svelte|css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/",
        "status": "404-200",
        "condition": null
    }
]

next add a <base href="/" /> to the <head /> tag in the app.html.

Explanation

The Amplify Redirect and Rewrite Config and the <base href="/" /> directs all the failed responses back to the index file, making any request that fails fall back to the sveltekit router.

SvelteKit: Dynamic routes, static renderer

Marc Frame — Sat, 26 Feb 2022 21:28:06 +0000

I asked the following question on the Svelte discord, but was able to solve it before anyone had a chance to look at the question (classic).

Question

I have a sveltekit app where I've defined a page as dynamic with the following svelte.config.js

import adapter from '@sveltejs/adapter-static';
...
const config = {
    kit: {
        prerender: {
            entries: [
                "/",
                "/portfolio"
            ],
        },
    }
    ...
}

because the page /blogs and /blog?file=/some/blog/file.md are populated by a fetch call to a rest API.

if I don't include the kit.prerender.entities I get the following error when I run npm run build

Error: Cannot access url.searchParams on a page with prerendering enabled

The issue is, that when I refresh the page, or route directly to the /blog?file=/some/blog/file.md it renders the index page instead of the blog page.

How should I fix this?

Here's an example https://mframe.ca/blog?file=About%20this%20blog.md

note it should render the blog, not my index page
you can route to that blog ("About this blog") through https://mframe.ca/blogs

Here's how the /blog page works

Answer

you have to run it in "SPA" mode. by providing a fallback to the adapter

adapter: adapter({
    pages: 'build',
    assets: 'build',
    fallback: 'index.html',
    precompress: false
}),

The issue was that it was looking for a /blog/index.html file but it of course wasn't there.

A better way to selectively prerender

<script context="module">
    export const prerender = true;
</script>

add this to the pages that you want to prerender, those without this declaration will not be prerendered. you will of course still have to 'run it in "SPA" mode' as noted above.

This is cleaner than the above solution of editing the
congif.kit.prerender.entities insvelte.config.js

View the source code for the blog here:

https://github.com/MarcDAFrame/SvelteGithubBlog

Github as a CMS for your blog?

Marc Frame — Fri, 04 Feb 2022 20:02:15 +0000

About this blog

This blog uses Github as the CMS, meaning github hosts the markdown and media files for the blog.

Demo

https://mframe.ca/blogs

Source Code

https://github.com/MarcDAFrame/SvelteGithubBlog

Why?

This is nifty because

you don't pay for a CMS / hosting
your blogs can be version tracked
you can write blogs with the same workflow as you write your code

How?

It's really dead simple

The blog uses the Github Rest API to query all the files in a repo, it then iterates through all the markdown files, building a tree view which is viewed on the /blogs page.

When a user clicks on the a blog they are linked to /blog?file=[SOME FILE IN THE REPO] where a call is made to the raw.githubusercontent.com endpoint to fetch the content for that file.

The only complicated part of this is how images and links are handled. A custom SvelteMarkdown renderer was created for both the Image and the Link which translated the image src to be fetched from the raw.githubusercontent.com, and translated the Link href to be relative to the currently open file, linking to the relevant /blog?file=[SOME FILE IN THE REPO] (if it was a relative link).

Caveats

An individual, unauthenticated user can only make 60 requests an hour, which means the user can only refresh the page 60 times and can only view 60 blogs. The rate limiting is separate between the two domains (raw and api) which means viewing a blog, and viewing all the blogs have different rate limits.

However, this isn't much of an issue as an individual user isn't going to be reading / refreshing your blog that much - and if they are then they probably deserve to be rate limited.