How to write server side code in SvelteKit
When I was writing Next.js code, if I wanted to write server side code only on my React component, I could do it in getInitialProps() lifecycle. But in SvelteKit that doesn’t exist. And if I try to console.log(process) variable, I get this error message:
ReferenceError: process is not defined
Is there a way to access the process object and do some server-side only code?
The answer is yes! You can import the browser variable from the $app/env library that SvelteKit provides or you can create endpoint files that have the same filename.
First, if you’re looking to become an expert Svelte developer for 2022, you might want to look into Level Up Tutorials, SvelteKit course for just $49.99. This course does a great job getting past difficult learning hurdles and giving you the skills and confidence to create amazing web applications.
Get started with SvelteKit course.
Disclaimer: The two SvelteKit course links are affiliate links where I may receive a small commission for at no cost to you if you choose to purchase a plan from a link on this page. However, these are merely the course I fully recommend when it comes to becoming a Svelte engineer expert.
Let’s see how we put these solutions into practice.
The quickest solution: Use the variable, browser
The first step is to import the variable, browser from the $app/env library.
import { browser } from '$app/env';
If you import this library in a .svelte file make sure to do it in a <script> tag. But you can do this also in a .js or .ts file.
The variable browser will return a boolean depending if the app is running in the browser or on the server.
Wherever you’re writing your code just wrap your server-side code inside an IF condition as such:
// If server
if (!browser) {
// Only prints on the server-side
console.log(process.env.NODE_ENV)
}
The output looks like this on my terminal:
development
Full code example
<script>
import { browser } from '$app/env';
if (!browser) {
console.log(process.env.NODE_ENV)
}
</script>
The better solution: Create an endpoint file
Even though the solution above works fine. I really would enjoy if my server code wasn’t in my .svelte file. And it happens to turn out that SvelteKit has a solution for that.
If you create a .js or .ts file that has the same name as your .svelte template file, the page will get its props from the endpoint!
Here’s an example, first let’s create a svelte file in our routes directory.
<script>
export let title;
</script>
<h1>{title}</h1>
In the routes directory i’ve created the homepage file (index.svelte), and I’ve exported a prop called title.
Now let’s create an endpoint that will toss dynamic props to our svelte template file.
export function get() {
// Do dynamc fetching or computing here
return {
body: {
title: 'Dashboard panel'
}
}
}
It’s that easy! Let’s go over a breakdown.
I created a new file called index.js and it’s returning the body object that contains the title prop value.
It’s important to note that you export the function name as get() to make sure this works properly, otherwise you may get an undefined variable in your .svelte file.
Hey, you’ve made it this far! If you found this article helpful, I would appreciate it if you liked or retweet the tweet below!
I like to tweet about Svelte and post helpful code snippets. Follow me there if you would like some too!
