How to configure aliases on React TS project with Vite
Tags: react, vite, typescript, tutorial
Published: 2023-06-01 00:14:10


So, I usually like to use aliases in my projects, not only because it is easier to read and develop, it avoids breaking imports but also because we generate less CO2 digital footprints with fewer characters. 

As I started using **Vite** in my personal projects, I started researching how to do it and ended up learning some details that I'll leave here for anyone who might be interested.

If you don't know what are aliases, here is a resume:
Everyday on dev life you have to import files to another and, if you are working on a big project, you see the paths for the import like this: `../../../../components`. 

This is awful, right? With aliases you can resolve this problem and, basically, transform this: `../../../../componets` into: `@/components` or `@components`. And in this post, I will show how to do it, with some explanation.

## First of all, how to use path?
Like you must know, the types of **Node** aren't preinstalled on React with Typescript projects, but, you have to use the `path` package on vite config later and you have to add these types for your project. So, first of all, make sure to run the command: `npm install -D @types/node` on your terminal.

For those who don't know what `-D` means, it's basically install the package `@types/node` as a development dependency. These dependencies aren't used on production environment, only when you are coding.

## Let's configure our Typescript!
For the Typescript understand that you want use aliases, you have to make sure you defined the `baseUrl` and the `paths` on your json configuration file (`tsconfig.json`), inside your `compilerOptions`:
```json
/* Aliases */
"baseUrl": "./src",
  "paths": {
    "@components/*": ["./components/*"],
    "@pages/*": ["./pages/*"],
    "@assets/*": ["./assets/*"],
    "@styles/*": ["./styles/*"]
  }
```
These lines basically tells to your **Typescript** where to find the base for the relative paths to configure each one.

## It's Vite time, baby!
Even if you configure `path` and `tsconfig.json`, this still not work, why? Well, you have to tell **Vite** to resolve your aliases too, otherwhise, it will not work, because **Vite** don't know what you're doing on **Typescript** configuration

You remember `path` package that you enabled the use by installing the node types? Now it's the time to use it!

So, on our `vite.config.ts` file we have to add the `resolve` key and, inside that, the `alias` key to define theses aliases too. So, after the plugin key, we can add these:
```json
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@components": path.resolve(__dirname, "src/components"),
      "@pages": path.resolve(__dirname, "src/pages"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "@styles": path.resolve(__dirname, "src/styles"),
    },
  },
});
```

Note: In my case, I only have these four folders to import and export things, but, if you have a few more, you can add the amount of aliases you want! By the way, if you're not using Typescript, since the third version of `create-react-app` you can do this on React with Javascript too, you just have to create a `jsconfig.json`.

**_I hope this helps! Thanks for the reading! You can go to code now, with aliases! Big byes!_**

**_Note: if you would like to read this article on Portuguese, please [access my linkedin blog](https://www.linkedin.com/pulse/configurando-aliases-em-projetos-com-react-typescript-jessica-castro-)!_**