Use SvelteKit to create npm packages
Tags: svelte, npm, opensource, javascript
Published: 2022-02-10 11:03:11

I have been using [svelte](https://svelte.dev/) for about 3 years and have had a lot of fun with it. The simplicity of using it, or the ability to jump into the [REPL](https://svelte.dev/repl) and trying out a crazy idea are just some of the great things that make it such a pleasure to use.

## The next big thing
Almost a year ago things were about to get even better. [SvelteKit](https://kit.svelte.dev/), the application framework for Svelte apps [was announced](https://svelte.dev/blog/sveltekit-beta) and entered public beta. SvelteKit is to Svelte what Next is to React or Nuxt is to Vue.

One of the hidden features included with this new tool-belt for building Svelte Apps is the command `svelte-kit package`.

This command will auto-generate a package from your `src/$lib` folder (this is a [special folder](https://kit.svelte.dev/docs/modules#$lib) for your shared code/components in SvelteKit) that you can publish directly to npm.

But I am getting ahead of myself. Let'S look at the steps in more detail 😉

## Setup your project
To get started run `npm init svelte@next my-app`.

I would recommend to select the following:

- skeleton project

- typescript

- prettier

- eslint

as they should make your live easier especially when working in teams.

There is one more package you need to add by running `npm i -D svelte2tsx`in your `my-app` folder.

Now you should be set to start with your first changes.

## Good first adaptions
I have developed a mental list of things that I want to do right in the beginning, as I tend to forget them when I jump into the thick of things.

The first thing I take care of is to make some adaptions to the `package.json`. Specifically I make sure that the package name is correct (had some upsis there). It also makes sense to add a namespace (I created a svackages organisation for all my svelte packages).

Other good things to add are the fields `repository`, `bugs` and `license`. 

To finish off this part, I do a rudimentary documentation in the `README.md` of how my code should work. This step is important as it will be the info shown on npm as soon as you publish. Ideally I will already add REPL url, where my future package will be easy to try out.

## Add your code
The next part should be the easiest. Add all the code that you want to publish in `src/$lib`. To make it easier on yourself, you can use the `src/routes` folder to test out your package. This is also a nice way of documenting your package and possibly even publishing it as a standalone site.

## Publish it
The last few steps to get your library published are actually pretty easy.

- run `npm run package` to generate your package

- Make sure that you are logged into npm (`npm login`)

- the last thing to do is to run `npm publish ./package` (hopefully you have two factor authentication and need to put in your code as well)

Now you have successfully published your (first) package with SvelteKit. 🥳

Happy coding and I hope you have learned something.

## Links

- [repos with my svelte packages](https://github.com/svackages)

- [set focus action on npm](https://www.npmjs.com/package/@svackages/set-focus)
- [set focus action repl](https://svelte.dev/repl/fa3cd21b4dd24b60a578386f7a1b6dc0?version=3.44.2)