How To Create Absolute Imports In Vite React App?

When working on a React app using Vite, we often come across situations where we have a complex folder structure which also makes our component import URLs complex. To resolve this issue we can use Absolute imports in Vite React App. absolute imports help us to import files directly from the root folder of the project which makes the code look cleaner and readable.

we’ll learn how to set up absolute imports in a Vite React app step by step. The easiest and most simple way to create Absolute imports in the Vite React app is by using Vite Alias in vite.config.js.

Steps to Create Vite React App

Step 1: Install Vite using the following command and select the options as shown in the images.

npm create vite@latest

Step 2: Choose React for the framework

Step 3: Choose JavaScript for the variant

Step 4: Navigate to the project directory then install dependencies using the below commands.

cd vite-project

npm install

Project Structure:

Updated Dependencies:

"dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.9.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.1"
  }

Absolute Imports In Vite React App

In VIte React App, we can create absolute imports by confugring the path aliases. A path alias informs the app how to interpret a specific import paths. For example, we can use '@' sybmol to denote 'src/' directory. Now we can import components from any location in the project without using relative paths.

• Now we need to open the file and implement above discussed approach in 'vite.config.js' file.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
});

• Now, if we need to import let say a header component from component folder in src then we will write the below code in our 'App.jsx'.

import Header from '@/components/Header';

• Before we needed to write:

import Header from '../../components/Header';

• We can observe that the complexity of the url has decreased and now it is easily readable.

Example: We need to make a component folder in src folder then create two files named 'Header.jsx' and 'Header.css'. We will import 'Header' component in 'App.jsx' and 'Header.css' in 'Header.jsx' file. The implementation is shown below.

// App.jsx
import React from 'react';
import Header from '@/components/Header';

const App = () => {
  return (
    <div>
      <Header />
    </div>
  );
};

export default App;

// src/components/Header.jsx
import React from "react";
import "@/components/Header.css"; //importing using @ to show the implementation

const Header = () => {
  return (
    <div className="header-container">
      <h1 className="title">GeeksforGeeks</h1>
      <p className="subtitle">Absolute imports in vite React</p>
    </div>
  );
};

export default Header;

/* src/components/Header.css */
.header-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    text-align: center;
}

.title {
    color: green;
    font-size: 3rem;
    margin-bottom: 10px;
}

.subtitle {
    color: rgb(255, 255, 255);
    font-size: 1.2rem;
}

// vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
});

Step to run:

npm run dev

Output:

Conclusion

By setting up the Absolute imports in a Vite React app the structure of the code is simplified and it becomes cleaner and easy to read. By avoiding long relative paths and adding simplified urls in our imports can help achieve better code quality. Even if the project grows larger, we don't need to worry about the complex structure of the project because it will be handled by Absolute imports.