Make Pathing Easier with Aliases in SvelteKit
Tags: svelte, javascript, vite
Published: 2021-08-05 00:08:14

---
title: Make Pathing Easier with Aliases in SvelteKit
published: true
description: Set up aliases to frequently used folders to make importing your components and utilities easier.
tags: svelte, js, vite
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5ynphjx2ej5p482i5iy.png
canonical_url: https://codingcat.dev/post/make-pathing-easier-with-aliases-in-sveltekit
---

UPDATE June '22:
[SvelteKit Alias Docs](https://kit.svelte.dev/docs/configuration#alias) were updated with an improved way of configuring aliases. Aliases can now be configured as top level under the `kit` property in the `svelte.config.js` file. This article is now updated to reflect this change.
```
const config = {
  kit: {
    alias: {
      $components: 'src/components',
      $utils: 'src/utils'
    }
  }
};
```

If you haven't heard about SvelteKit yet, go checkout the beautiful site over at [kit.svelte.dev](kit.svelte.dev). SvelteKit is a component framework similar to React and Vue with one key difference, there is no virtual DOM. Svelte is a compiler that builds itself away into a sleek and fast end user experience. If you haven't tried Svelte or SvelteKit before, you can check out my quick intro [tutorial](https://www.youtube.com/watch?v=fOD_3iSiwTQ) where we build a blog in 30 minutes 🤯 


Links:
- [SvelteKit Docs](https://kit.svelte.dev/docs)
- [Svelte Docs](https://svelte.dev/docs)

TLDR: To setup an alias add the following lines to the `svelte.config.js`. For the code editor you are using to understand the alias, we also need to add to the `jsconfig.json` paths with the aliases you want to create.
```js
//svelte.config.js
import path from 'path'
const config = {
	kit: {
		alias: { 
			'@components': path.resolve('./src/lib/components'),
					'@lib': path.resolve('./src/lib'),
					'@utils': path.resolve('./src/lib/utils')
				}
			}
		}
	},
}
export default config
```
```js
// jsconfig.json
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
             // name and path to aliases
			"@components": ["src/lib/components"],
			"@lib": ["src/lib"],
			"@utils": ["src/lib/utils"]
		}
	},
	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}
```

## Default Starter

To start a new SvelteKit project run `npm init svelte@next app-name` into the terminal where you want the folder to live. Change directory into your new app, `cd app-name` and run `npm i` to install the dependencies. Out of the box SvelteKit provides a `$lib` alias setup for the `src/lib` folder and a number of modules are available from `$app` and `$service-worker`. Outside of those, it is up to us to set up our own aliases and preferences on how to use them. These all use the `$` syntax to use it, however, we are able to change the lib folder to `@` or other symbol if preferred.

## Change default alias

To update the default `$lib` alias to `@lib`, we need to tell vite that we want to use it by updating the `svelte.config.js` and the alias will work in our application. For the code editor to understand the alias, we need to edit the `jsconfig.json` file. Inside the `svelte.config.js` by default we see this setup.
```js
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
  },
}

export default config
```
Inside of the kit property, we need to add a an alias property to hold the aliases we are setting up. I prefer the `@` symbol rather than the default `$` and will show how to setup the `@lib`, `@components`, and `@utils` aliases. We need to import the included path module from node at the top and add the alias property under the kit property. The new `svelte.config.js` will look like this.

```js
//svelte.config.js
import path from 'path'
const config = {
	kit: {
		alias: { 
			'@components': path.resolve('./src/lib/components'),
					'@lib': path.resolve('./src/lib'),
					'@utils': path.resolve('./src/lib/utils')
				}
			}
		}
	},
}
export default config
```

Next, we also need to set them up inside the `jsconfig.json` file. By default that looks like this.

```js
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
  // here is the default $lib setup by SvelteKit
      "$lib/*": ["src/lib/*"]
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}
```

As you can see, the default `$lib` is added to this config already. We need to update that and add the paths for our other two aliases. The updated file will look like this.

```js
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@components": ["src/lib/components"],
			"@lib": ["src/lib"],
			"@utils": ["src/lib/utils"]
		}
	},
	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}
```
Under paths we have added the `@components`, updated the `$lib` to `@lib`, and added `@utils` with the corresponding paths.

## Using the aliases

Now we need to use the aliases inside of a file. The skeleton starter doesn't come with any folders outside of the routes folder for the routes of the application. If you chose this option, you can simply add the `lib` folder inside of the `src` folder to use the `@lib` alias. The other paths and aliases we setup are nested inside the lib folder. Add a `components` folder and `utils` folder inside of the lib folder. The folder structure should look like this.

```
src
  - lib
    - components
    - utils
  - routes
```

Now any files created inside of `lib`, `components`, or `utils` can be imported using the alias rather than having to type out the absolute path, like so.

```html
<script>
import FileName from '@lib/FileName.js`
import ComponentName from '@components/ComponentName.svelte'
import UtilName from '@utils/UtilName.js`
</script>
```

And that's it 🥳 now you can use all of the aliases we created or create more of your own. I'm [@brittneypostma](https://twitter.com/BrittneyPostma) on Twitter if you have more questions or just want to chat about Svelte 😃 Cheers!