The Public Interface

It’s hard to avoid adding lots of different dependencies when creating a full-stack web application. Many projects use separate packages for rendering, routing, data fetching, creating an API, managing state, hosting a database/storage, and setting up authentication. Lee Robinson recently wrote Why You Should Use a React Framework, in this post he highlights how developers should spend their time writing code that is unique to their application, and less time writing boilerplate to connect tools together. I believe we can take this one step further by utilizing SvelteKit, and even further by pairing it with Supabase.

SvelteKit is the first party framework and the recommended way to build Svelte applications. Among other features, it provides a powerful way to load data and render pages server side.

In addition, SvelteKit works nicely with TypeScript, one nice feature of SvelteKit’s load function is how the returned type is passed to its respective layout or page.

Supabase is a popular backend-as-a-service tool. Some of the features it provides include a PostgreSQL database, optional hosting, authentication, serverless APIs, and helper querying libraries. Supabase makes it simple for JavaScript developers to create robust, full-stack applications with the skills and language they already are familiar with.

During development, it’s useful to keep track of the type of data you expected from any particular request. With TypeScript, you can take advantage of typechecking and auto-completion as your write your queries and in your markup. This is often difficult to accomplish because you must keep track of and sync your types against your schema (tables, columns, types, etc.), or create a type for each request.

If you’ve used Prisma before, you’ll be familiar with the benefits of having schema types generated for you instead of creating them yourself. This is made possible because your schema is also housed in your project.

While you can use Prisma with Supabase, it requires some extra configuration to take full advantage of features like row level security or authentication. We do not have to use Prisma–or manually write our schema/types in our project–to get the same benefits using Supabase’s JavaScript client. Instead of having to create a type for each query, it’s possible to generate types based on your projects schema with the Supabase CLI. Then you can easily utilize these types throughout your project.

Here’s how to start creating full-stack, type safe, applications with SvelteKit and Supabase in under 40 lines of code.

Since Row Level Security is enabled on our table, no one can currently create, read, update, or delete. We can add a SELECT policy to enable our database to be read.

Inspect the new file, these generated types should match our table schema. Each time you update your schema in Supabase (add a new table or column, change a type, etc.), you can run this command to sync your types with your project.

Next we can set up our client to query the database.

The generated types are imported here and applied to the client, then our responses from the client will be automatically typed! If you are seeing errors when importing the environment variables, be sure to run npm run dev.

Finally, we can fetch our data with a server side load function.

This loads the data server side for server side rendering. Check out the SvelteKit’s loading data documentation if you’re unfamiliar with how this works.

As you type, you should see your table name appear as an argument in the from method due to our generated types!

Here’s where we can take full advantage of TypeScript’s type checking and autocompletion. You can press ctrl + space to get suggestions and the types from your schema. The best part is that this is all accomplished without having to manually create any types.

Supabase and SvelteKit together can equip you with a powerful toolset and eliminate many extra dependencies in your stack. SvelteKit and the Supabase client, combined with the generated types from the CLI gives you the power of TypeScript without the extra work. Thanks for reading!…