How to Setup Path Aliases in Vite React?

Path aliases are a powerful feature in modern JavaScript development that simplifies module imports by allowing you to use shorthand paths instead of relative paths. In Vite React projects, setting up path aliases can enhance code readability and maintainability by providing clear and concise import statements.

Prerequisites:

• Nodejs
• React

Approach to Setup Path Aliases in Vite React

To set up path aliases in a Vite React project, start by creating a new Vite project using npm create vite@latest my-react-vite-app --template react, then navigate to the project directory. Next, update the vite.config.js file by adding alias configurations in the resolve. alias section, like @components: '/src/components'. After that, create a jsconfig.json in the root directory, and define the alias paths under compilerOptions.paths. Finally, use the aliases in your imports throughout the project, for example, import MyComponent from '@components/MyComponent'.

Steps to Setup Path Aliases in Vite React

Step 1: Install NodeJs, If you haven’t installed NodeJs, download it from the official website.

Step 2: Create a new Vite Project

npm create vite@latest my-react-vite-app --template

Step 3: Select a framework: select the React framework here using the downward arrow key.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

Step 4: Select Variant: choose any variant of your choice using the downward arrow key,i.e: choose JavaScript

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

Step 5: Now, switch to my-react-vite-app directory

cd my-react-vite-app

Step 6: Install Dependencies

npm install

Step 7: Update vite.config.js

Add path alias configurations in your Vite configuration file.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@components': '/src/components',
      '@utils': '/src/utils',
    },
  },
});

Step 8: Create and add below code in jsconfig.json

Ensure your jsconfig.json includes the path alias settings.

// jsconfig.json
{
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@components/*": ["src/components/*"],
        "@utils/*": ["src/utils/*"]
      }
    }
  }
  

Step 9: Use Path Aliases in Your Code

You can now use path aliases in your import statements. For example:

// Before alias
import MyComponent from '../../components/MyComponent';

// After alias
import MyComponent from '@components/MyComponent';

Project Structure:

Updated dependencies:

  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.8.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "vite": "^5.4.0"
  }

Example: In this example, path aliases are set up in Vite React by configuring the vite.config.js file to resolve paths like @components/Button to src/components/Button.jsx. The App.jsx file imports the Button component using this alias, and both App.jsx and Button.jsx use inline styles for styling and interactivity.

// components/Button.jsx

import React from 'react';

const Button = () => {
    const buttonStyle = {
        padding: '10px 20px',
        fontSize: '16px',
        color: '#fff',
        backgroundColor: '#007bff',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
        transition: 'background-color 0.3s ease',
    };

    const handleClick = () => {
        alert('Button clicked!');
    };

    return (
        <button style={buttonStyle}
            onClick={handleClick}>
            Click Me
        </button>
    );
};

export default Button;

// App.jsx

import React from 'react';
import Button from '@components/Button';
// Import using the alias

function App() {
    const appStyle = {
        textAlign: 'center',
        marginTop: '50px',
    };

    const headingStyle = {
        color: 'green',
    };

    return (
        <div style={appStyle}>
            <h3>
                Setup Path Aliases in Vite React
            </h3>
            <Button />
        </div>
    );
}

export default App;

Start Server using below command, make sure check your port no on the terminal it may be different for you system.

npm run dev

Output: