Opens an external site in a new window
Pray for peace.
RODNEY LAB
  • Home
  • Plus +
  • Projects
  • Giving
  • Contact
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Contact

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

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

SvelteKit $lib Import Aliases #

Updated 10 months ago
3 minute read Gunning Fog Index: 4.7
Content by Rodney
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 that 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, VSCode will recognise 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.

@askRodney 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 Optimisation 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 …

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 Twitter via Webmentions.

Related Posts

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 – 2023 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

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