Under the Hood

Let’s begin with how the idea came to the mind. One of my friends posted a tweet about this JS confusing file system for configuring third parties.

Let me explain, you want to install Tailwind CSS along with webpack and typescript in your frontend repository.

So what you typically do you add all the corresponding files in the root directory to mention the configuration.

This raised a question among developers otherwise it will keep on increasing the configuration files for different packages all lie in the root directory path.

This tweet summarises everything I am talking about.

Introspection

So I think the solution won’t be easy.

First, we should understand why we need these config files in the root directory.

When I googled this thing, I found that people are discussing this problem in nodejs projects.

the creeping scourge of tooling config files in project root directories #79

boneskull posted on Jul 10, 2020

Splitting this out from #71 which was rather broad. There are (at least) two separate issues there; one is where user-specific config files should live, and another is where project-specific config files should live. This issue is about project-specific config files.

The files we're talking about are configuration files for development dependencies and are committed to VCS.

Many projects suffer from the problem of too many config files in the project root, as @iansu tweeted:

We put config files in the project root because we put config files in the project root. There is no reason other than a lack of an alternative convention.

We can do better than this. The idea is we aim for a “critical mass” of popular tooling authors moving their project-specific configuration to a subdirectory (e.g., .config/). If we can agree on a subdirectory, and change our tools to support the new subdirectory, we will significantly reduce this problem. It's our hope (though not a strict requirement) that the convention we agree upon will be flexible enough to reach beyond the JS ecosystem. For instance, your .travis.yml and netlify.toml could live in this directory as well, if this idea becomes popular enough.

We should get buy-in from maintainers of popular tools; if these tools adopt the new subdirectory, it's likely the ecosystem will slowly follow suit.

cc @nodejs/tooling @nodejs/package-maintenance

View on GitHub

But that’s not the point either, why we need these files in the root directory lies in the past.

• Centralised configuration is easy to handle
• Easy to setup the configurations as one file in the root directory
• Easy to read by package.json exists and must exist in the root directory
• Easy to work and scale with other developers in the team
• Easy to read by GitHub and version controls

A lot of thought wouldn’t have been given to this problem statement, instead, developers developing packages simply stated to define a config file in the root directory.

Alternative Solution

I googled the solution and found a stackoverflow discussion

Is there a way to put every configuration file to a config directory rather than root in Node project?

Mar 31 '22 Comments: 1 Answers: 1

8

Lately, I've been creating a chrome extension and for that, I use a bunch of tools and bundlers that requires a config file-usually starting with a dot. In the root directory, everything looks so cluttered, and it takes a few seconds for me to find a file in the root.

…

Open Full Question

Is there a way to put every configuration file to a config directory rather than root in Node…

But most of the discussions are going for nodejs projects, and we also want to solve this convention problem for frontend frameworks.

This makes sense to me a lot now, a lot of developers need a config folder to put all the configuration files and a lot of developers won’t need that because they understand the existing solution.

Where we want is a good question, but as a developer, we should try to make it better. A good option will be putting efforts into solving this problem for at least a few developers who might live to see all config files inside the config folder.

Solution: Single Config Directory

Single config directory meaning one config folder inside the root directory contains all the configuration files.

Config folder in the root directory will contain, tailwind, webpack, yaml, and other configuration files to configure third-party tools.

The biggest bottleneck is the tools that require the config file to be present in the root directory and in that case, we can’t alter that tool config within our project, so need a smart move in that case.

3 Steps to do that!!!

1. Create a config directory
2. Add all the config files in the directory
3. Adjust the build scripts, and tools scripts accordingly (this will be tricky)

This sounds easy but some of the tools won’t work at all simply because they inherently deal with the configuration located in the root directory.

And that makes everything tricky, but we do need this configuration solution as an optional solution.

One way to do that is to create an npm script that alters the configuration for tools during build time from the root config directory.

In this way, we can simply put all the config files in one directory and make our repository look clean and simple.

But a lot to do in that case because it’s a universal method for a lot of developers and npm modules to have a config file in the root directory.

That’s it

See you in the next one.