Alias paths in e-Business React

In React, the term "alias" typically refers to creating a shorthand or alternate name for a module, component, or path. This can be particularly useful for simplifying imports, improving code readability, and managing complex directory structures.

In e-Business React project, we have made use of path aliases. This has allowed us to define custom paths for components in our project. Instead of using long relative paths like "../../../components/atoms/Buttons/SimpleButton", we can now use a shorter alias like "@components/atoms/Buttons/Button". The symbol "@" replaces the multiple "../", and automatically points to the directory mentioned.

Setting up custom alias paths

In the e-Business React project, you need to set alias paths in the following three files, which are located in the root directory:

1. vite.config.js

   The `vite.config.js` file is used to resolve alias paths across the project.
   Format: - "@alias": path.resolve(__dirname, "path")
   Example: - "@validations": path.resolve(__dirname, "./src/validations/")
   
   

2. jsconfig.json

   The jsconfig.json file helps the editor to recognize and handle path aliases. Also helps with editor features like auto-completion, go-to-definition, and more.
   Format: - "@folderName/*": ["path/*"]
   Example: - "@validations/*": ["./src/validations/*"]
   
   

3. .eslintrc.json
   

   The .eslintrc.json file resolves the alias paths for ESLint
   Format: - ["@folderName", "path"]
   Example: - ["@validations", "./src/validations"]
   
   

Related Topics

Configuring Routing to existing or new page