Custom import paths and how it can help you
Tags: react, javascript, beginners, codequality
Published: 2021-06-28 14:56:37

*making your imports more elegant and organized*

If there's a pain that bothers me when I'm developing an application with many files, it's when those files import other files, and that causes an excess of `../` in the imports of those files.

It is common to see that as our application grows, the folders of our project files are nested more and more inside other folders, and when we least expect it we come across the following import example:

```jsx
import ExampleComponent from '../../../../../../src/components/ExampleComponent/'
```

The example above is real and is much more common than we think. Unfortunately, the excessive use of these `../` brings some pain when we need to maintain our code, among them, the rework of fixing the relative path every time we need to change the location of an imported file or import file.


One of the simplest ways to make this import more elegant and organized is to create a custom path and leave it as an absolute. Thus, the example above could look like this:

```jsx
import ExampleComponent from '~/components/ExampleComponent/'
```

In the example above, the `~` prefix was set as an absolute path to a directory in our project, in this case the directory is the `src` folder. That way, no matter what folder our file is in, when we use the `~/` prefix, we will always be importing the absolute path of the `src` folder.

Really good right?!

![wow gif](https://media.giphy.com/media/1yiPWNsQ1vq7V90fRY/giphy.gif)

### Making it happen

#### Installing dependencies

First of all, we'll need to install and configure three dependencies for this magic to work. And they are:

**react-app-rewired and customize-cra**

At the root of our project, let's run the command below to customize the webpack settings without the need to use eject and without the need to create a react-scripts fork.

```bash
yarn add -D react-app-rewired customize-cra
```

**babel-plugin-root-import**

Now let's run the command below to import files using custom paths.

```bash
yarn add -D babel-plugin-root-import
```

#### Creating `config-overrides.js`

Also at the root of our project we will create a file called `config-overrides.js`. He will be responsible for establishing the root folder of our project.

Let's insert this code into the file:

```jsx
const { addBabelPlugin, override } = require('customize-cra')

module.exports = override(
  addBabelPlugin([
    'babel-plugin-root-import',
    {
      rootPathSuffix: 'src',
    },
  ])
)
```

#### Making life easier for the ~~dev~~ editor

Still at the root of our project, we will create a file called `jsconfig.json`. He will be responsible for making VSCODE understand the custom paths.

Let's insert this code into the file:

```json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["*"]
    }
  }
}
```

#### Last details

Lastly, we will update the scripts in the package.json file. Leave them this way:

```json
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}
```

As you can see, we are replacing all `react-scripts` with `react-app-rewired` with the exception of the `eject` script.

### All ready!

Now we can use any file inside our src folder using `~/` at import time.

```jsx
import ExampleComponent from '~/components/ExampleComponent/'
```

### And...

If you want to see this example in practice, you can take a look at the template I created for React projects here:

{% github diegosilvatech/boilerplate-cra-typescript no-readme %}

---

Comment there what you think about this approach in our imports :)


---