Creating path aliases in create-react-app with react-app-rewired

Photo by Kevin Ku on Unsplash

Imagine having lots and lots of files in your project structure (as it usually happens in any corporate applications).

And imagine having to import so many modules (components for react Devs 😉) in your application.

Your start of the file starts to look something like this.

Components import with relative paths

Isn’t it a bit difficult on eyes to see this?
Don’t you feel this should be more refined?
And to top it all, WHAT IF I moved one of the files? I’d have to change the import paths for all of my impacted files.

Even though VSCode offers to rename all the path files imports, but imagine the git changes it’ll counter.

There has to be a better way to manage path files imports

There should be a way where I can import all the files with a common alias and need not worry where it has been defined, and if it is ever moved from there, my part of code shouldn’t be affected. The answer you are looking for-aliases. Thank you 😁.

Aliases are some common paths prefixes that custom defines the source of the file.

Files imported through aliases look something like this.

Import through aliases

It looks so clean. All my actions are defined in @app-actions, all my constants in @constants, and so on.

There are many utilities like webpack that allow us to define these paths in their config.

But many small react applications don’t need a webpack config, and many don’t have one, like those created with ‘create-react-app.’ How to define aliases there?

Fortunately, there is a way. It is through tweaking the create-react-app webpack config(s) without using ‘eject’ and without creating a fork of the react-scripts. All the benefits of create-react-app without the limitations of “no config.” You can add plugins, loaders whatever you need.

  1. Install react-app-rewired
Installing react-app-rewired node package in the application

2. Create a config-overrides.js file in the root directory.

A typical config-overrides.js

3. ‘Flip’ the existing calls to react-scripts in npm scripts for a start, build and test.

Changing scripts from react-scripts to react-app-rewired

4. Now that we have rewired our react app, it is time for declaring aliases. Head over to the config-overrides.js file and import ‘addWebpackAlias’ from ‘customize-cra.’ Also, import the ‘path’ module.

importing necessary modules for defining aliases

5. Add a new key ‘addWebpackAlias’ to the override payload of the exports. It might already have a few configs defined by default. Add an object with key-value pairs where the key would be your path definition, and the value would be a path resolving function. Something like this

Defining aliases

6. And you are good to go.

Using aliases

Your code looks super clean without those hunting ‘../../../’ prefixes. Just import the standard files, and don’t worry if they are moved within the project. Just update their path resolution in config-overrides.js, and you are good to go. During the build stage, the react-app-rewired will interpret these aliases and pick the file from those paths.

I hope this solution fixes the issue for all. If you come across a better and cleaner approach, the writer is all ears.

Feel free to add in your comments and feedback.
Stay safe

Front-end Developer @Google, Singapore

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store