# Make Pathing Easier with Aliases in SvelteKit


Original: https://codingcat.dev/post/make-pathing-easier-with-aliases-in-sveltekit


If you haven't heard about SvelteKit yet, go checkout the beautiful site over at [kit.svelte.dev](https://codingcat.dev/post/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:

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.

```javascript
//svelte.config.js
import path from 'path'
const config = {
	kit: {
		target: '#svelte',
        // add from here, plus the import path from 'path'
		vite: {
			resolve: {
				alias: {
                    // these are the aliases and paths to them
					'@components': path.resolve('./src/lib/components'),
					'@lib': path.resolve('./src/lib'),
					'@utils': path.resolve('./src/lib/utils')
				}
			}
		}
	},
}
export default config

```

```json
// 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.

```javascript
/** @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 vite config for the aliases we are setting up. I prefer the `@` symbol 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 vite property under the kit property. The new `svelte.config.js` will look like this.

```javascript
//svelte.config.js
import path from 'path'
const config = {
	kit: {
		target: '#svelte',
        // add from here, plus the import path from 'path'
		vite: {
			resolve: {
				alias: {
                    // these are the aliases and paths to them
					'@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.

```json
{
  "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.

```json
{
	"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.

```plain text
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.

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!