Stop using create-react-app

This is a cry for help. I beg you, I am on my knees, weeping, imploring you...

STOP USING CREATE-REACT-APP

Ok so if you don't want to read the whole article let me tell you what's what in simple terms (TL;DR):

• create-react-app stopped being updated over 2 years ago
• react-scripts which CRA depends on, stopped being updated over 2 years ago
• CRA is slow compared to modern alternatives
• webpack is very slow compared to modern alternatives

What's the solution? In one word: Vite.

No Longer Updated

The last time the create-react-app package was updated was on April 12 2022 at 1:33 EDT, which by all accounts as of writing this, is over 2 years ago. And while some things can go years without updating, it's important to realize that CRA itself has a lot of dependencies which have not been updated, and have suffered from vulnerabilities. When you run npx create-react-app you'll get the following result:

8 vulnerabilities (2 moderate, 6 high)

The Facebook/React team have no intention at this point of fixing any dependency, as made clear by the fact that create-react-app is no longer updated and they now recommend other tools (see further down).

React-Scripts

react-scripts is the actual dependency used by CRA when running your dev server, with npm run dev and when building with npm run build. And just like CRA, its last update was in 2022, in fact, in the exact same commit as CRA's last update. react-scripts has a ton of dependencies that have since updated and patched, but of course, react-scripts won't update.

Webpack

I don't want to bash webpack here, but I will say this : webpack is slow as shit, compared to Vite. It's not as configurable as the alternative either, even if it seems to have plenty of a plugin ecosystem, it's already been overshadowed by what Vite offers.

The solution: Vite

Vite (pronounced somewhere between vit and veet since it's the French word for "Fast") is a direct replacement for create-react-app's features, in that it offers a fully configurable development environment with a hot reload server and plenty of plugins.

Not only is Vite configurable, it's blazing fast and it also supports basically all front-end frameworks. That is to say, you can create a Vite project for React, Svelte, Solid, Vue, Lit, Quik, and Angular. It even lets you create vanillajs applications but with builder dependencies such as tailwind, sass, etc.

Personal anecdote time : When I first learned of Vite in a previous job, I took half a day to convert a project that was using react-scripts into Vite. It took half a day because it was a pretty massive project, I was a Junior level dev, and I was new to a lot of it. I knew it was worth it, and I was right : When saving a file and waiting for the hot reload in the browser, the waiting time went straight down from 6 MINUTES to LESS THAN A SECOND. Yes, you're reading that right, I didn't make a typo between "minutes" and "seconds". The initial build time also was reduced to about 20 seconds, because it was still a pretty massive application.

So when I say "blazing fast" I actually do mean it, it is not a hyperbole or exaggeration. And I'm going to do it again, and again, in every project I work on still using react-scripts.

So, have I convinced you? Go right ahead and get started with Vite today.

How to convert

Ok so you might be wondering if there's going to be a whole lot of changes to make in your code, right? Well... not really. The truth of the matter is that the vast majority of your changes happen at the configuration and root level of the app.

Converting a CRA app into a Vite one boils down to:

• From a new folder (not your existing app), run npm create vite@latest
• Select React as a framework
• Choose Javascript + SWC or Typescript + SWC depending on whether you use TS. (SWC makes the build process even faster than not using it)
• Let it generate the scaffold project
• Copy over all your components and subfolders (EXCEPT FOR App.js and index.js)
• Modify the main.jsx and App.jsx to re-introduce your configuration including react-router, your contexts, etc
• Add any required plugins into vite.config.js
• Adjust for errors/issues

Obviously the last 3 steps are where the majority of your work will go. Depending on the complexity of your existing application, finding the correct plugin and configuration might take a bit of time, and adjusting for errors you might encounter could take some time. But in the end, I repeat again that it will absolutely be worth the effort.

What if I need help?

If you've reached this far and you've decided to switch but are afraid of having to deal with problems and errors, I invite you to join me in the #javascript channel of The Programmer's Hangout on Discord. I hang out there as eslachance (usually nicknamed Alterion), don't hesitate to ping me for help and mention this dev.to article. The more official Reactiflux server is also at your disposal.

If I'm not available there are plenty of people in TPH and Reactiflux that can help you, some that I've directly converted to Vite!

A Conspiracy Theory

Stop reading here if you don't care about drama, conspiracy theories, and rants. I'm about to go deep into a rabbit hole which you're absolutely not forced to follow me into - Vite's cool as it is, it's your answer, you may disengage for the rest ;)

The question I asked myself often is : Why did the React team bury the mention of Vite deep within a collapsed "Deep Dive" block on the Start a New Project page of their docs. Why does the mention of Vite feel very brushed off, just a comment, a maybe not important note at the very end of a wall of text most people won't read?

What I think should have happened is that instead of this massive hidden wall of text casually handing out a mention of Vite along with Parcel... it should have been a paragraph at the top level of the page, before any mention of NextJS and other full-stack frameworks.

The page should have noted that create-react-app is deprecated (it makes NO mention of CRA at all!) and that its direct, suggested replacement for a front-end-only project was to use Vite.

Instead, what the documentation does is suggest to use a "Production-grade React framework", and starts with NextJS as the main one, the first one.

Here's where the conspiracy comes in. NextJS is made by Vercel, who also offers hosting that is specifically compatible with NextJS, which is not hostable unless you are on a service that supports it. Even if the docs say All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider , it fails to mention that the hosting or server requires nodejs to be running for this to work.

I am aware of NextJS's "static output" but that doesn't support most of its features and more importantly, isn't an SPA but rather a Static Site Generator where every page is reloaded, just what React avoids happening.

Now... Vercel is a large company, and they have been infiltrating themselves into the React ecosystem. As one reddit post points out:

• "The React team is currently working primarily with Vercel to "research, develop, integrate, and test framework-agnostic bleeding-edge React features like React Server Components". The React docs website is built on NextJs."
• "Vercel has been more aggressive in hiring and sponsoring React core team members."

Now... it doesn't source these facts, so take it with a grain of salt (I haven't been able to seriously find any source for these on my own. that's why it's a conspiracy theory and not an affirmation of facts). But it sure makes me wonder just how much money Vercel has been pumping into the React team, how many members of that team it stole and how that affected the React docs and the team itself, either directly or through "my colleague used to work here and now is at Vercel and they keep telling me Next is great".

If you have any solid information on the subject I would love to hear from you in private, do a little bit of investigative journalism, and write up a real article or video on the matter. But until then, it'll remain just real life conspiracy theory I'll continue to believe in until an official Facebook/React team member explains to me why the hell Vite isn't put front and center in their docs.

That's all, folks!