SvelteKit code often includes the SvelteKit $lib import alias. If you are new to SvelteKit, you
might have seen this and wondered what it does. In the video, you will see SvelteKit $lib is
nothing more than an alias for the
src/lib folder. Typically,
you will add a
components folder in here, as well as folders for
other code which you want to share between pages and endpoints. You might also have asked
$lib is defined within the SvelteKit config
files, as well as how you can create your own custom aliases. In this short video, we tackle all
of that as well as look at a quick example.
If that’s what you wanted to know, then hit play on the video! After that, don’t forget to check links below. You will also find a handy code snippet, below, referenced in the video. Drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.
Here we define a custom
$tests alias which maps to the
- 10 tips for getting started with SvelteKit,
- Automated accessibility testing with Playwright in SvelteKit,
- Twitter handle: @askRodney .
- In SvelteKit, typically you place code which is shared by multiple pages in a src/lib directory. You might include Svelte components as well as utility functions here. $lib is just an alias for src/lib. In fact, in the config it is defined as an absolute path. When importing code from src/lib, instead of a relative path, you can use $lib. The advantage here is that code looks cleaner when importing from a deeply nested folder. On top, it saves you having to count the number of '../' patterns in your path is correct after refactoring. In fact, you can just copy a $lib import statement to any other file and have it just work!
- $lib is defined in the tsconfig.json paths object. This is included by default at .svelte-kit/tsconfig.json file. It is included in default config even if you are not using TypeScript.
- You can edit the jsconfig.json file in the root folder of your project to add your own, custom, import aliases. We have seen you need to edit tsconfig.json instead if you are working in TypeScript. Either way, just define the `baseUrl` as "." and then add a paths object which defines the paths your aliases reference. Once defined, VS Code will recognize these aliases.
If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, 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 Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.