Hosting sveltekit on AWS Amplify

#svelte #javascript #aws #webdev

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.