✨ SvelteKit Hosting

We have previously looked at SvelteKit hosting with Netlify, today we see what Render have to offer. Render is a newer service offering hosting, like Netlify, Cloudflare and Vercel. They offer free hosting for static sites (up to 100 GB of bandwidth per month). Although there is currently no official documentation on the Render site about hosting a static SvelteKit site, we'll see it is not too difficult to do. As it stands there is no SvelteKit adapter for for Render, which means you might prefer Netlify or Cloudflare Workers if you want to build a Server Side Rendered site. That said, for static sites, Render works like a charm.

Server Side Rendered vs Static Site Generators

Server Side Rendered sites (for example those produced by NextJS), like Static Site Generated sites are good for Search Engine optimisation or SEO. Typically you prefer SSG when your sites visitors do not need to log in and, essentially the page looks the same to every visitor. In this case the site is converted to HTML at build time. That pre-generated HTML is served to every visitor (possibly “hydrated” in their browser). Because every visitor sees the same site, this is no good for a site like Twitter, for example, where you want to log in and see content compiled just for you (Tweets from accounts you follow, your DMs etc). The waters have been muddied recently; for example, with SvelteKit you can deliver static or prerendered content on some pages even though others are Server Side Rendered.

Anyway back to Render and static SvelteKit hosting. First we will see what you need to do in your app code to make it static. We assume your app is already suitable for static generation by its nature. Then we see how to link Render to you GitHub repo and generate your static site.

🔌 SvelteKit Static Adapter

SvelteKit has various adapters. Like a travel power adapter lets you charge you tablet in another country with a different type of power socket, the SvelteKit adapters let you host your Svelte site on different services. They are needed because SvelteKit typically relies on serverless functions for SSR and different platforms handle serverless functions differently. As well as platform specific adapters, there is a node adapter, and more important for us, a static adapter.

Let's start by installing the adapter package. At the time of writing SvelteKit is still in beta and to get the latest fixes, be sure to get the @next version we use here:

pnpm install -D @sveltejs/adapter-static@next

As well as installing the adapter, you need to tell SvelteKit to use it. Open your svelte.config.js file and ensure it contains the two lines highlighted below:

/** @type {import('@sveltejs/kit').Config} */
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

const config = {
    preprocess: [
        preprocess({
            scss: {
                prependData: "@import 'src/lib/styles/variables.scss';"
            }
        })
    ],
    kit: {
        adapter: adapter(),
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};

That's the SvelteKit configuration side set up. Next push your site to GitHub.

🧱 SvelteKit Hosting: Set up Render

Jump over to the Render site and click START FREE TRIAL, if you don't yet have an account. If you are just hosting static sites, you will not need to provide payment details. Enter your email address and choose a secure password. You should also set up multi factor authentication.

Next click the New + button (top of screen) and select Static Site. Here I choose a public repo. You can use a private repo instead, you will just have to authorise Render to access your GitHub or GitLab account. We can use any unique Name. For the Build Command we can use npm run build unless you have modified from the SvelteKit default in your package.json file. For the Publish directory add ./build. Don't forget to define any environment variables needed for your app. You will find these under Advanced. Finally click Create Static Site at the bottom. It shouldn't be too long before your build is ready and you can click the URL to open it.

If you have your own domain, you can just add a CNAME record wherever it is registered to point to the url which your new render site has. That's the Render site set up.

🙌🏽 SvelteKit Hosting: Wrapup

In this post we saw:

• how to set SvelteKit up to generate a static site,

• setting up an account with Render,

• how to build a static site from a git repo on Render.

If you don't yet have a site ready to push, but want to try our Render, just use the demo site repo from the Apollo Client Sveltekit Tutorial. You will just need to generate your own GitHub API token. There are instructions in the GraphQL Github post.

🙏🏽 SvelteKit Hosting: Feedback

Have you found the post useful? Which other hosting service would you like to know how to host a SvelteKit site on? Would you like to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram. Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.