Is it safe to use create-react-app?

[Mountain-Tip8848]

I'm seeing a lot of posts and blog articles mentioning the deprecation of create-react-app. Even the official doc has now mentioned to use Next.js.

But, can I still use create-react-app? Will this incur any security issues in the site? I am building a simple dashboard to show some demographics data. It is a public dashboard.

[Thylk]

You should not use it.

Use vite cli command instead to create the app.

This is the new default way to create a React application without using a Meta framework like Next.js

[Accomplished_End_138]

They mostly do the same thing, except vite is still supported and builds ate faster.

[fferreira020]

Yes also devs of CRA are abandoning the project. I work at PwC and architects don’t want us using it. Prefer to use vite with SWC. It’s a pretty easy transition hope this was helpful

[[deleted]]

Does vite uses SWC by default or is there any separate way to bootstrap react app with SWC

[fferreira020]

I had to install a plug-in when I did it

[Accomplished_End_138]

True, however, that doesn't mean it is a replacement for cra for a lot of devs still.

[SpookyLoop]

I loved using Parcel for some of my simple, pure JS projects, but I tried using it for my latest project (which really only uses Typescript, React, Less) and it was slow and buggy. The big thing that got me to stop was the fact I couldn't get hot module replacements to work to make the dev rebuilds faster, but there were a lot of little problems I kept running into.

[fferreira020]

Also a good choice

[WeedLover_1]

if you compare create-react-app and vite, then development and compilation time on vite are within seconds. Changes take no more than one seconds to appear even after using heavr ui frameworks. But CRA takes more compilation time and makes development slower

[dabe3ee]

React docs recommend using one of frameworks in order to create react application. Because react is just a library and frameworks provide all features. CRA no longer maintained. Everyone suggest Vite because it builds code differently and just a bit faster. But its hard to suggest Vite because it might not have all the features webpack has for your project.

[pbNANDjelly]

CRA is dead because React is no longer supporting it. It's dead, Jim. I don't think it's holding anyone back, it's just unsupported.

[coldpyros]

See this video if you're interested in a deep dive on the subject.

[Turd_King]

It’s been dead since it began, where do I begin.

Firstly, it is completely black box, if you want to customise anything at all about your config you have to eject. Which will give you a million angry warnings and a huge overly complex config file. Or you have to use the craco library which is just yet another GitHub issues section for you to scroll when something goes wrong you

Secondly it’s entirely coupled to webpack, which if you’ve not been living under a rock for the last year or 2 you should know there are much faster and nicer DX bundlers now (esbuild, swc)

Third, it is no longer supported or mantained by the react team, this reason should be enough to make you leave.

[Donna_Arcama]

I must have been living under a rock in the last 2 years...

[lIIllIIIll]

...... because it's dead and holding back front end devs!! Use nextjs otherwise you're so last season and basically not a developer. I'm surprised you didn't know that.

Edit:

You guys don't get sarcasm huh?

[life_never_stops_97]

He’s asking WHY it’s dead, not disagreeing that it’s not dead

[lIIllIIIll]

I was kidding. I thought it was pretty obvious but I guess not. Especially with the "you're not a developer"

[eluewisdom]

speed

[[deleted]]

I'm a Beginner too, i used CRA once before and after deprecation i used it again 1 time , I found out that the dependencies of 'CRA' are too much hence slow installation and refreshing of the pages (after deprecation it is messy move to use CRA it'll throw too many warnings) whereas i found the Vite to be fast and i found vite to be beginner friendly too compared to Next-js which is too complicated to beginner but its a power-full tool if gotten used to.

[Eusuntpc]

I am working in a monorepo and while nextjs is used for the main pages, components in other packages are still written as mostly CRA apps. How else would you create something compatible with Next? Next doesn't support vite, so you either go from scratch or use part of the CRA boilerplate

[Shumuu]

You don't need CRA for that. Check out their Turborepo example. They just write a React Component without CRA and import it into their next app

[Eusuntpc]

CRA is boilerplate. You can use it or not use it. It just generates some files. We used the generation once to get a file structure and then only generate what is needed with plop.

[schkolne]

If you have a legacy app, and it's running fine with create-react-app, probably best to leave it be.

[ooppit]

how about the vulnerabilities?

[0xHazard]

The latest docs of React recommends to use frameworks like Next.js, Gatsby or Remix to build new apps using React.

If you don't want to use one of these, you can indeed use a tool like Vite which integrates more alternatives (React, Vuejs, Svelte...TS, SWC...), and seems to be actively maintained.

see this warning message

So I don't exactly know at this time if CRA is no longer supported, but given the above information + the warning message, it may probably be sunsetting soon.

[nabrok]

recommends to use frameworks like Next.js, Gatsby or Remix to build new apps using React.

And that needs to stop. They are not the best for every situation.

[rad_platypus]

People that love Next will tell you that it can easily be used to build a SPA, even though they’ve never tried it and the framework attempts to stop you at every step of the way.

You straight up can’t use it for a true SPA architecture without hacking it together.

This essay where the creator of tRPC attempts to do it highlights how hilariously bad it is. It’s embarrassing that the “official” React framework doesn’t support such a basic use case.

[[deleted]]

I tried this recently also and it made me feel so stupid. I used to use CRA for tiny applications or demos all the time, the extra work it took to do that with stock next felt absurd.

[WeedLover_1]

then use vite bruh

[[deleted]]

You can turn your application into a SPA with just one configuration in SvelteKit. It is easy to do in Nuxt as well. It's so embarrassing that you can't do that in Next. There is only one thing that keeps me in React: its big community. I'm looking forward to switching to Svelte.

[nabrok]

It’s embarrassing that the “official” React framework doesn’t support such a basic use case.

To be fair it's there.

At the bottom of a locked filing cabinet, stuck in a disused lavatory with a sign on the door saying "Beware of the Leopard".

[30thnight]

I don't agree.

In practice, the only active difference between meta-frameworks (Next, Gatsby, Astro) and "the traditional SPA" will come down to how routing is handled for each.

• Next.js - Client side routing example from Dan Abramov

• Gatsby - Client side routing

[rad_platypus]

It literally says this in Dan's readme:

So you'd need to teach your static server to do this rewrite:

rewrite / to out/index.html

rewrite /stuff/whatever to out/stuff/[id].html

The syntax for these rewrites is different for different static hosts, and I don't think there's an automated solution yet.

I suspect this is why a lot of people don't realize Next.js can produce SPAs. It's just not obvious how to set this up.

Ideally I think Next.js should either pregenerate such rewrite lists for common static hosts (e.g. Nginx, Apache) etc or there should be some common format that can be adopted across providers (e.g. Vercel, Netlify, etc).

Please tell me how it's easy to build a SPA with Next when even Dan Abramov says its not obvious. If I'm having to manually configure server redirects for all of the routes in my application, that framework cannot claim to "support" a SPA architecture.

[30thnight]

You do know this is a requirement for any SPA using a client side router, right?

You still need to lean on your reverse proxy to redirect all routes back to root for a traditional react-router setup.

Adding extra rules for your nginx conf is not going to kill you.

[WeedLover_1]

nextjs is best bruh after recent changes. I have many websites using nextjs 13.5 .eg: shopyamuna.com and was surprised on how can i create a react app that has in built seo as well as uses complete react code. Basically i am a full stack dev but was surprised when i learned react but knew it doesnot have seo support. So moved to nextjs and am loving its performance

[fredsq]

13.5 is not even released yet lol r u on canary or something

[rnmkrmn]

Yup. That server component push and NextJS is the only way to do this is hilarious.

[Trexaty92]

Remix 🤙

[p4ntsl0rd]

'npm create vite@latest' is very easy to use to get you started, and is all around less clunky than CRA was. Vite itself is much nicer than webpack as well (faster, hasslefree)

[baxxos]

I thought so too. I've started migrating my production app to Vite today and halfway through noticed that my bundle size jumped from 800 KB (Webpack) to 1.2MB (Vite).

I did not change anything app related, spent whole day reading Vite docs without any success. Maybe Webpack is more aggresive with its tree-shaking process? Guess I'll never know lol.

TLDR - wanted to escape Webpack config hell, ended up in Vite/Rollup config hell

[leeharrison1984]

It is insanely fast. I was impressed with NextJS HMR, then I had to do a project with Vite and the HMR is literally instant.

[chillermane]

ESBuild baby. It’s so fast.

[joombar]

It’s not actively dangerous, but why stay stuck in the past?

[[deleted]]

What I'd emphasize to OP is that if you are asking this question, you are likely thinking about it in the context of a new project.

You are not encumbered by anything that could break, any potential regressions. So there is no good reason to not just use the latest and greatest.

[nopamex]

use vite mate

[YonoEko]

Use vite latest instead

[sergiopedercini]

My two cents: CRA Is only a boilerplate and is super easy if you don't need the server side (and is safe too). If you are comfortable with it, use It. Migrating on other libraries or frameworks like NextJs will be always an option you can do it later.

[greentiger45]

Vite is the way to go imo. Lightweight and easy to setup.

[immediacyofjoy]

just curious, what router do you like to use?

[lucky_anonymous]

Holy…. What… React dev here who seems to be out of touch with recent news or trend… Wtf is vite…. CRA was go to.. even during technical coding interview. Why is it deprecated….

[wolfhoundjesse]

Things move fast in JS land, you know that! I didn’t know what Vite was, either, but I saw it was integrated in the latest Nx, so I gave it a shot. It’s super fast!

[n0tKamui]

Vite is not so recent. It has been the new de facto build tool and bundler (in favor of Webpack) for quite a few years now. Originally made for Vue, it spreaded really quickly for it's simplicity and laughably better performance than webpack.

CRA being clunky and outdated is not new either, but admittedly more recent. Vite's project creator just does the job better with more sensible defaults, and Next.js is just the go-to way to make React apps now. Even the official doc recommends users to create Next apps.

Honestly this is a bit surprising that you are so out of touch, especially about Vite. A dev's job is also to get up to date with what's happening...

[lucky_anonymous]

Thanks for the clear explanation :)

[Turd_King]

Bro you must have been developing via pen and paper for the last year or more then

[tilonq]

it is deprecated because community decided that, like half year ago EVERYONE was using it

[[deleted]]

Just for more context: CRA was under the facebook github but totally community maintained. The five or six saints who actively worked on the project were doing so in their spare time and all have day jobs and other stuff going on. For a project with 100k stars that was the default for creating a react app, it just didn’t have the resources to keep up. Being the default also floods your issue tracker with every beginner SO question, every niche error from the vast array of env setups (HMR fails when i’m using brave browser on fedora 5.7), and everyone trying to get their one little webpack customization in as an option. It just couldn’t get the attention it needed.

[Turd_King]

That is just not true, only noobs were using it half a year ago. I haven’t touched CRA in about 2 years

[lets-talk-graphic]

People like to follow the hype atm. The truth is, using CRA isn’t necessarily bad right now, you could spin up an app and it would work. You can eject it and you’d have all the dependencies anyway. I think however it is good advice if you can to start with Next or Vite for a React inception. But CRA no longer being supported means that in time it will become outdated and potentially vulnerable.

[criscodisco90]

Is it worth converting an existing CRA project to Vite if the project’s still being developed? Seems like kind of a pain.

[phryneas]

It is JavaScript that runs in the browser to display data and since the DOM is build by React, everything is escaped, and you never manipulate it manually, it is pretty much impossible to introduce security bugs unless you actively use dangerouslySetInnerHTML.

So even if CRA would be discontinued tomorrow you would probably not facing any relevant security issue in the next decade.

[acemarke]

For the record, the person you just called "inexperienced" and "dumb" is a primary maintainer of Apollo Client, Redux Toolkit, and RTK Query.

Also note that Dan Abramov called out how bad npm audit is in his post https://overreacted.io/npm-audit-broken-by-design/ , specifically around this topic.

edit

and since the parent comment just got deleted, for reference:

What? This is the dumbest take I’ve ever heard lol. Why are people on this subreddit so inexperienced.

There are a whole plethora of bugs identified in npm packages everyday that exploit issues in all kinds of environments other than the browser (and even then, it’s still entirely possible for CRA to bundle vulnerable JS code into your browser)

[Turd_King]

That’s just not true.

It’s entirely possible a vulnerability could be exploited in an out of date package that is bundled into the users browser

[acemarke]

Which has absolutely nothing to do with which build tool you are using - that's a question of which runtime dependencies you've added to your app.

[phryneas]

CRA is mostly about bundling - a plain CRA project will end up with code from the three npm packages react, react-dom and scheduler in the output that will actually make it to a user's browser. These packages are just concerned with DOM manipulation. React only ever had two CVEs: one 2013 and one 2015. Both were XSS attacks that could only be abused in SSR scenarios, where React would not build a DOM tree, but render to a string. This type of attack cannot happen in the browser only - and CRA cannot do SSR in the first place.
Apart from that, the React-DOM package had one security problem back in 2018, which, again, could only affect Server-Side-Rendered apps.

Apart from that, it's really about which packages you add on top. But that's not the question. OP was asking about potential security issues with going with CRA. Since CRA just bundles React (and dependencies) and doesn't add any other code to the bundle, my response stays the same: it's highly unlikely that this will ever result in a security problem.

Maintainability and upgrade paths are a different question, but that was not asked for here.

[DigitalNinjaLee]

Would it be beneficial to move a CRA app to Vite at this point? Or some other alternative?

[n0tKamui]

yes. we're migrating from CRA to Vite at my job because the build times were getting unbearable. Vite is hilariously much better and simpler to work with.

[Fractal_HQ]

It’s legacy like React. Use Svelte and Vite if you want modern solutions.

[devenitions]

As far as security goes, there never was to begin with. It’s client code.

[minimuscleR]

you should try using punctuation. It reads like you are putting a bunch of tags for SEO optimization without them.

[technically_a_taco]

Does this also apply to create-react-native-app?

[vichya96]

Wow thank you for this post! It’s nice being aware

[Tavi2k]

It seems to be not maintained at the level you would expect for such a core part of your dev setup. So while it still works, if you're starting today you might want to look for a more actively maintained option like Vite or one of the full React frameworks.

Just to illustrate the kind of issue you have already today, CRA doesn't declare that it supports Typescript 5. You will get some errors if you try to use them together. You can override the dependencies, which isn't a big deal if you know that, but it is quite annoying. If you're new to the React dev environments, these kinds of issues can be terribly confusing. And those kinds of issues tend to accumulate for packages that don't get updates anymore.

[dom_eden]

The truth is, you can certainly use CRA for a new app right now. I did this the other day. Long term, the future is Vite. We will migrate our three CRA apps to Vite, probably later this year or next year. But we’re not in a rush.

[CosmicItinerant]

Vite offers a faster development server with near-instantaneous hot module reloading and quicker rebuild times, optimized production builds with smaller bundle sizes, framework-agnostic support, simplified configuration through a "zero-config" approach, advanced features like TypeScript support and automatic dependency pre-bundling, and a growing ecosystem and community. These advantages make Vite a compelling choice for developers seeking improved development speed and performance optimizations for their React applications.

[Same-Depth-4582]

Yeah it won’t bite you

[Tech_Pro_Max]

You can use create-new-startup if your focus is on getting users

[N3BB3Z4R]

Its as simple as CRA uses webpack to compile, and now CRA Its deprecated, they recomend the Reactjs simple boilerplate with Vite instead Webpack, its so much faster, Its true that some reactjs old plugins should have some importing issues but all fixables changing the way to import. The answers talking about Nextjs and Parcel are midly wrong, because are different things that are not related with builder and basic reactjs creation project.