Vite- React - Typescript

In one of my side projects where I was constantly calling components in React, the paths such as ../../../ were bothering me. So, I created a React project with Vite. I had previously tried it with the Craco library, but then I realized that Vite had a more straightforward integration that already supported it, and I wanted to share it with you.

• React
• TypeScript
• Vite

Steps to set this up:

Step 1:

In "vite.config.ts":

import * as path from 'path'

export default defineConfig({
plugins: [react()],
resolve: {
alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
},
});

Step 2:

In "tsconfig.json":

{
"compilerOptions": {
"types": ["node"],
"paths": {
"@/": ["./src/"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

Usage:

import Comp from '@/components/Loading'