Automatic Vite Path Aliases with React and TypeScript

This repository demonstrates how to set-up automatic path aliases just like Next.js in Vite using React with TypeScript.

Going from this:

import Button from "./../../../../../../components/Button";

To this:

import Button from "@/components/Button";

If you need custom aliases, check out the custom-aliases branch

Additionally, you can read the full article detailing this setup: https://www.aurelianspodarec.co.uk/blog/how-to-setup-aliases-in-vite-with-react-and-typescript

Getting Started

Clone the repository:

git clone https://github.com/AurelianSpodarec/example-vite-aliases-react-typescript.git
cd example-vite-aliases-react-typescript

Install NPM dependencies:

npm install

To start the development server, run:

npm run dev

Contributions

Feel free to open an issue or create a pull request. I'm always happy to add notes to the article and/or code.

You can contact me on Twitter/X to direct message if needed.

License

This project is licensed under the MIT License. Feel free to use the code freely!