Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

SvelteKit $lib Import Aliases # SvelteKit $lib Import Aliases #

blurry low resolution placeholder image SvelteKit $lib Import Aliases
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. SvelteKit SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

SvelteKit $lib Import Aliases #

Published: 4 years ago
3 minute read
Gunning Fog Index: 4.7
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

📚 SvelteKit $lib #

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 yourself where $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.

📹 SvelteKit $lib: Video #

Please enable JavaScript to watch the video 📼

SvelteKit $lib Import Aliases

🗳 Poll #

What were you most familiar with before trying SvelteKit?
Voting reveals latest results.

🖥 SvelteKit $lib: Code #

Defining your own aliases in jsconfig.json / tsconfig.json #

Here we define a custom $tests alias which maps to the tests directory:

jsconfig.json or tsconfig.json
json
    
1 {
2 "compilerOptions": {
3 "baseUrl": ".",
4 "paths": {
5 "$tests": [
6 "tests"
7 ],
8 "$tests/*": [
9 "tests/*"
10 ]
11 },
12 },
13 "extends": "./.svelte-kit/tsconfig.json"
14 }

🔗 SvelteKit $lib: Links #

  • 10 tips for getting started with SvelteKit,
  • Automated accessibility testing with Playwright in SvelteKit,
  • Twitter handle: @askRodney .

🏁 SvelteKit $lib: Summary #

What is $lib in SvelteKit all about? #

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!

Where is the $lib alias defined in SvelteKit config? #

$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.

How can you define your own custom import aliases like $lib in SvelteKit? #

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.

🙏🏽 Feedback #

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.

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

Just dropped a new video explaining what the

$lib import aliases in ❤️ SvelteKit are all about.

Hopefully, you'll find it useful if you are new to Svelte.

Let me know what else you struggle(d) with learning Svelte and SvelteKit 🧑🏽‍🎓https://t.co/dPZuk7XDu2

— Rodney (@askRodney) April 11, 2022

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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
SVELTEKIT

Reposts:

Reposts

  • Wilson Naranjo profile avatar

Likes:

Likes

  • Kevin Matsunaga profile avatar
  • Nenad Kostic  profile avatar
  • Raksha A profile avatar
  • Chrisna Adhi Pranoto profile avatar
  • Webjeda 🛹 profile avatar
  • Mark Dacre profile avatar
  • abdelrahaman shehata profile avatar
  • David Peng profile avatar
  • Thiago Carvalho profile avatar
  • Roli profile avatar
  • Matthew Higley 🇺🇦 profile avatar
  • Ryan Arpe profile avatar
  • opensas profile avatar
  • Wilson Naranjo profile avatar
  • Antonio profile avatar
Reposts & likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image SvelteKit Port: Changing Dev & Preview Server Ports

SvelteKit Port: Changing Dev & Preview Server Ports

sveltekit
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.