Why I still don’t like create-react-app (CRA)

CRA or create-react-app helps to create a react app with just a single command. It has a package called react-scripts that can run an app in dev mode, run tests or build the app for production. It is quite useful for demos, prototypes and internal apps. But I still don’t like it as much. Here are the top 3 reasons why I still don’t like it in the year 2021!

Server side rendering

CRA does not support server-side rendering out of the box. So, we can’t use it for simple apps like a landing page app. I found a few articles which claim to use CRA for server-side rendering. But the author of the article says that is a bit error-prone and not easy to do.

For server-side rendering, we have Next.js. So, it is not a big problem that CRA does not support server-side rendering.

Does not support Less

I am not a fan of Less. But I need CRA to support Less styles. Or at-least the ability to customise styles using Less. My favourite UX framework is antd. And antd uses Less. So, I want to customise Antd by over-riding the Less variables.

To do that, we have another package called @craco/craco. These are the steps to add a Less loader using craco.

Add the package using yarn add @craco/craco.

Use craco instead of react-scripts in the scripts section of package.json:

"scripts": {
  "start": "craco start",
  "test": "craco test",
  "build": "craco build"
}

Install the craco-less plugin using yarn add craco-less.

Add a craco.config.js to add the less-loader into the build process:

const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true
                    }
                }
            }
        }
    ]
};

Great! We have a work-around now to use create-react-app and still be able to write Less styles. Of course, without ejecting the app.

My real reason to not like CRA is because of the reason that follows.

Building the app in dev mode

In my current work, I maintain two environments. The production environment is what we have for customers. But there is a dev environment where we host the app for internal / company users. This is also the environment where QA happens. For this environment, I build the app with NODE_ENV set to development.

When I use CRA, I don’t have an option to prepare a dev build. All I get is a minimised and highly optimised build with production environment file applied. I can’t use the internal or dev version of the API because the environment flag is set to production.

There is of-course a work-around to it. Instead of using NODE_ENVflag to determine whether the app is in production mode, we can use another environment variable to do that. But even with that work-around, all we get is a highly minified and optimised build. I use redux-logger quite a bit to identify issues. With the optimised build, I don’t see the redux logs in the dev environment.

So, it is 2021 and I still don’t like CRA! 🙂