Javascript Packages & Configuration

I recently completed a code test for a job application and decided to use Next.js. It went fairly well, however I spent so much time just modifying configuration files and here are some rambling thoughts on that.

These are all the config files required to run the app:

Apart from Jest, this is a default install. I could have easily added Webpack config, Next config, Prettier, ESLint and TSLint. Not to mention css pre-processors or other css-in-jsx that aren’t included in Next.

In the app’s defence, it’s trying to do a lot. It’s running Javascript through the Babel transpiler for it to run in the browser, it’s type checking (when it works!), it’s running Jest tests in a Node environment that’s simulating the browser with JS DOM and Enzyme and finally it’s running an Express server for it to do server side rendering …phew!

Rather than re-inventing the wheel, a few frameworks try to solve all this configuration for you by bundling all these great packages together. But that never really works out for a few reasons:

So what’s the solution? Off the top of my head:

I’m at the stage where I am happy for someone to make these, let’s face it, often trivial decisions over linting config or what’s the best css-in-jsx library. I’d rather have something just work!