Ghost Themes
SimpleChat.Support - Open Source Live Chat App
Can we please use the create-react-app?
words - read.

Can we please use the create-react-app?

I was very restrained regarding the create-react-app tool, because you know... I have my own habits like we all do. I like custom configuration which isn’t really possible with create-react-app and this was a little bit confusing for me at the time. I didn’t want to change my habits, and I guess that’s why I didn’t wanted to take a closer look at the create-react-app library. At the same time, I really like the CLI tools in Preact or new Angular.

Let’s take a look at the barriers for me and why I like to work with the create-react-app now. Here are some pros and also later the cons of this approach. I guess this blog post is for the unconvinced people. I hope that it will help you to decide whether to use the tool or not. It’s important to mention that this isn’t a tool for every use cases, but let’s assume here that we’ll think about standard single page apps built with React.

First things first – short introduction of the tool

Create-react-app is a set of tools including a command line tool, which allows you to create a React project with a custom scaffold and a run development server for your app. It is all based on Webpack, but what is awesome is that you don’t need to touch the Webpack configuration at all. Everything just works. It is something similar to the Angular CLI, Preact CLI tool or Ember CLI.
It was always a pain for me to configure a custom Webpack setup and then optimize it for production. This isn’t hard but time consuming. Copying my boilerplate is also annoying. So, create-react-app seems to be an obvious choice, right? Not for all, of course. I’ll talk about it later.

Why this title here?

Of course the title is just my wish. Why? Because when we all start using official scaffold tools we will be able to change teams, projects and companies with ease. I mean us as JavaScript developers. We will get standards in the beginning of every project. For me, it would be much simpler to join a project which uses the same tools as my previous project/team - or at least some common fundamentals. So standards are very good in that context. Of course you can say that this is just a build tool, development server and that’s it. So why do I have problem with that, right? But when we think about all further choices which could be made using create-react-app, we may end up with a very similar stack in many different projects. I think that’s nice.

Good ‘ole JavaScript fatigue

We - JavaScript developers - all know this phrase, right? In our day-to-day work we always need to decide which tools we should use, which will be the best, and that’s ok, but sometimes many of them are good and what then? What should we choose then? And even if we choose something which we’re familiar with, what about other developers? They could have a hard time when joining the projects. So maybe we could break some of our habits and try to use and improve some common toolset which is also good? It could be a little bit different, but in the end we’ll probably achieve the same effect. And I mean official tools which are promoted by community and creators of main library.
By the way, I really recommend you the talk by Dan Abramov about an approach to tooling and project’s configuration in JavaScript.

Why do you think it’s better than my custom Webpack configuration?

Of course I can’t answer this question without knowing all possible Webpack configurations (which is impossible), but I know that the Webpack configuration from create-react-app is well prepared, production ready and battle-tested. So that’s probably why you should try to use it. And it is probably better than your boilerplate, believe me. If I’m wrong, please show me your work. I would love to use your tools too.

Ok, what if I need custom Webpack changes?

That is actually a very important part of this article. For me, it was always problematic to decide to use create-react-app. Here is my old Twitter post about it:

Styles management wasn’t the only barrier for me. I just didn’t feel comfortable without access to my Webpack configuration.
I’ve tried to go back to this tool a couple times. I watched many talks about it, and then I started to understand why this tool is built that way and why it doesn’t support many custom approaches for styles and other tools (I know that this could change in version 2.0 – even better, right?). This is because these approaches can be problematic in the future and support for them in this kind of tool might be almost impossible. That’s probably the main goal for it - to have the set of tools and approaches which are most common and most used in the community and at the same time set aside others which could be problematic and also make the maintenance of the main tool very hard. At the same time, it keeps the balance between options and maintenance.

I found that it can be more valuable to break some of my habits and switch to other more generic approaches. I found that instead of some style approaches like CSS Modules, I can just use CSS in JavaScript or even standard simple CSS, which has much more possibilities nowadays. I found out that, in most cases, I don’t even need preprocessors. The same with PostCSS. I usually use it only for Autoprefixer and create-react-app has it preconfigured, so why bother with that? These are just examples, but it shows that sometimes it’s better to rethink some habits.

But let’s go back to the main topic. What if I need to change my Webpack config anyway? Create-react-app allows you to ‘eject’ from its frames and it’ll generate custom configuration files which you can change. Of course you won’t be able to go back to the previous state of your project. You’ll just have a custom Webpack based React app from this point.
This is the recommended and official way of doing that. Of course you should do it only when there is no other way and you really need customizations. You need to be sure that from now on you’ll be able to handle the project without using the create-react-app CLI tool.

I don’t want to ‘eject’, is there another way?

The second way is really awesome, but you need to know that it isn’t an official solution and you need to be aware of that. I strongly recommend not using any third party tools because you can achieve almost everything with the standard create-react-app, but I want to show you the solution which could help you decide to use create-react-app in general.

If you don’t want to eject using create-react-app, and at the same time you want to improve Webpack config, add some loaders or change the configuration, you can do that using react-app-rewired. This is something which will replace standard react-scripts library that is used by create-react-app and you’ll gain the option to enhance the Webpack configuration without ‘ejecting’.

Again, as you can read in the documentation, you need to be aware that using this tool you’ll break some basic assumptions provided by create-react-app. So I guess you need to use it only for a very important part of your project.

As for me, I use it sometimes in projects, for example when using Ant Design, and in fact it all works very well for me. But it is always better to use just what create-react-app gives you. It’ll be always simpler to debug your workflow and ask for help in the community, which is very big.

So what you need to do is just install react-app-rewired and then you need to replace react-scripts with the react-app-rewired library. Then you can use a special config-overrides.js file and provide your config overwrites. You’ll find much more in the documentation.

Let’s sum up

Create-react-app is a very good tool when you want to keep the same approach in many projects, and you want to have a very performant and quick start. It is good for all single page apps built with React. It is also good because it ‘forces’ the developers to use some of the battle-tested approaches, configuration and tools. When you really want to keep the option of changing your Webpack configuration, you can use a third party library or you can also find some other good tools. You’ll find them in the official create-react-app documentation.

From version 2.0 of the library, we might have some of the missing puzzle pieces like CSS Modules or SCSS preprocessing, which is really great news. Read more about it here.

Please let me know how long you’ve used the tool and whether you like it or not. I’m also curious how many times you need to ‘eject’ in projects.


comments powered by Disqus