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