We need a new convention for Javascript
Tags: webdev, javascript, programming
Published: 2023-10-24 21:41:51

# 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](https://twitter.com/_swanson/status/1715073746073973203) summarises everything I am talking about.

{% tweet https://twitter.com/_swanson/status/1715073746073973203  %}

## 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.

{% github https://github.com/nodejs/tooling/issues/79?source=post_page-----267c54eda495-------------------------------- %}

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

{% stackoverflow https://stackoverflow.com/questions/71698049/is-there-a-way-to-put-every-configuration-file-to-a-config-directory-rather-than?source=post_page-----267c54eda495-------------------------------- %}
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.