For the last few years I have been using SvelteKit for my main fullstack framework. I found it so easy to get going with, I switched from Next.js and haven't gone back. In fact this blog website is written in SvelteKit 😊.

Here are 3 things about SvelteKit I love:

1. How Environment Variables Work

I found using environment variables intuitive and different. The framework automatically loads .env or .env.development when working locally, and instead of using process.env object you can import variables defined in your .env file with $env/static/public or $env/static/private. When you're using typescript the framework actually builds the types from the variables you define the .env file during development, this happens dynamically using vite (if you're using vite for development).

Below is a snippet of SvelteKit code, the fist block of code is client side code imported with $env/static/public and the second block of code is server side code imported with $env/static/private.

2. How Useful Adapters Are

SvelteKit is unique from other frameworks, it is a compiled framework. Just in Time(JIT) compilers are historically what is used in javascript frameworks on the frontend and that's what React does (at least until recently), JIT's rely on the browser runtime to take higher level code and turn it into vanilla Javascript. SvelteKit differs by compiling its framework code into vanilla Javascript during the build process.

The compiled nature of the framework enables something called adapters, a customizable component that enables building your application into different formats. For instance, you can use an adapter to build the code into a node application, a static frontend, or a chrome extension. During a contract project I actually took a chrome extension adapter and modified it for my companies particular use case. This capability makes SvelteKit very flexible for different projects.

Here's a few links:

Svelte Societ, List of Custom Adapters

SvelteKit Docs: Writing Adapters

3. The Local Scope and Global Scope of CSS

CSS in SvelteKit is so much cleaner than other frameworks, components have self contained local scope but global styles are still usable with the local component scope. This makes templating and building a design system feel more like working with native css stylesheets in an application. I think its more intuitive than using something like Styled Components in react.

Below is a code block that shows how you might use styles like this, you'll see a src/routes/+layout.svelte file that defines global css variables that you can use in any page, layout, or component on the front end. I really like how organized this makes the code, CSS styles are where I would expect them to be.

Conclusion

Frankly, SvelteKit is so much easier to use than other frameworks and there are a number of reasons for that beyond what I mentioned above. Environment variables, adapters, and CSS are three of my favorite things about this framework, but there are more that I could write about!

Search Posts