How to configure aliases on React TS project with Vite

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:

/* 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:

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!

Comments

[Kiran Mantha]

Great article @jessicacastro , it would be helpful for others if you provide a sample codebase

[Jyothikrishna]

Thanks for sharing this.

[NE0386]

Very interesting info. Can I do same process in JavaScript? Will it work?

[Jessica Castro]

Yeah, after the third version of CRA (create-react-app) you can do this on a jsconfig.json on your project! We also have a package named craco for that. But, in my opinion, jsconfig.json will work well to do it!

Btw, I will add this information on the post too!

[Ajeet Kumar]

Thanks for sharing this. I am using Vite React with JavaScript. But didn't worked out for me.