DEV Community

Cover image for Goodbye create-react-app
Abhigyan Gautam
Abhigyan Gautam

Posted on

Goodbye create-react-app

React developer team recently removed create-react-app from the official documentation. This means it is no longer the default method of setting up a new project in React. According to this pull request on Github, create-react-app is finally gone.

The problem with CRA

For far too long,create-react-app or CRA has had problems with its performance. It is slow and bulky compared to the modern methods. The initial setup is quite bulky as there are a lot of dependencies to be installed. It also is outdated as the dependencies themselves suffer from warnings during installation. These problems have troubled developers for far too long. Since CRA was the officially supported way, beginners had a hard time solving these issues.

What are the alternatives?

There are various ways to setup a new React project. In fact, the official documentation now mentions frameworks like NEXT-JS, Remix etc for beginners. In this post however, we will look into using Vite to setup our React app in under a minute.

Why Vite?

Vite is one of the fastest ways to start a project in react. It has faster server start time. It has better compatibility with plugins. It supports TypeScript, has better dependency resolving features out of the box. React projects created from Vite are just 20% the size of that created by CRA. You can read more about Vite here

Creating a new React project using Vite

Let's create a new React project using Vite. Run the following in the folder where you want your new app.

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

Vite setup

Name your project and select React from the type of project. Next select variant, here we are using JavaScript.

React Variant

And it is done! Seriously, that's it. All of this takes less than a minute to setup.
You can now run the app using

cd <project-root>
npm i
npm run dev
Enter fullscreen mode Exit fullscreen mode

Your app is up and running

React app running


Top comments (10)

brucknert profile image
Tomas Bruckner

Vite has high chance of not working in production with React

ag2byte profile image
Abhigyan Gautam

Thanks for pointing this out. I agree that Vite is still not 100% replacement for CRA, but is better in all aspects. Plus the official documentation now mentions frameworks like Next.JS as the starting point

budyk profile image

woow,,,that is a serious bug

gochev profile image
Nayden Gochev

Why it uses NPM and not NPX ?

npm is only for packages not for project creations, npx is for executions.

P.S. Not a JavaScript developer here really I am asking since this was my understanding.

ag2byte profile image
Abhigyan Gautam

Not really sure, but I think since Vite just creates a standard project structure using npm. However, you can still use npx to create project structures based on templates. Look up community templates

fromaus37 profile image
fromaus • Edited

It does use npx behind the scenes I think.

So npm create xxx actually runs:

npx create-xxx

So in NPM there will be a package named create-vite and this is what gets executed.

Similarly, the command for scaffolding a new Next.js app in the Next.js quickstart is npx create-next-app@latest. This can instead be run as: npm create next-app@latest (I suppose @latest can be omitted).

By the way npm create is just a synonym for npm init that we routine use to scaffold a blank Node app. So by saying npm create vite we are just passing the name of package create-vite to npm init to use as the scaffolder instead of the default scaffolding logic.

danrez profile image
Daniel M

Thank you alot

jpstorrie profile image

My team and I Ran into quite a few issues with authorization sessions/cookies in vite. Tried again in create-react-app and had no issues with it whatsoever. Not sure how I feel about either but I'm not commited to one or the other

fromaus37 profile image
fromaus • Edited

Vite is only good for learning IMO. The last time I checked, it didn't generate a proper production bundle.

A framework like Next.js on the other hand is entirely about production bells and whistles. So next.js has put tons of work in production webpack config (with code splitting, image optimisation, polyfilling etc all configured for you) which you can customise also and which they keep updated. They also have a really simple CI/CD experience and terrific support for SSR and SSG and for SEO.

In fact even for learning, next.js would be an excellent tool. The scaffold it generates is so simple and minimal that you can scaffold a new app to quickly try something out in React or to follow along with a YouTube tutorial. I think somebody who has build a couple of pages with React by linking the two react scripts directly in script tags and understands the basics of how JSX gets translated into HTML, should be able to follow next.js's excellent Getting Started tutorial.

Given how some it is to get started with Next.js, the only advantage I see with Vite is that it has a faster Dev server. But Next.js Dev server experience isn't slow either. So Vite's Dev server being faster is a moot point IMO.

lionelrowe profile image

Though I never knew you at all
You had the grace to hold yourself
While those around you crawled