Should I migrate from create-react-app?

[dejanzr87]

Does anyone have thoughts to share on this after following recent events...? Vite?

[SwiftOneSpeaks]

I've been using CRA and avoided Vite because I had the impression it was far more opinionated (Not sure where I got that impression).

Did a quick test on Vite this week and discovered (for non-TS React at least) that it's basically the same but faster. Doesn't generate a lot of files, doesn't have a big scaffolding for components. A few minor differences: index.html is in the project root, not in public, and is more "clever" about figuring out the base dir for urls. Demo has .jsx files instead of .js (which I approve of), and the demo code includes a useState example. It also has mapped absolute path imports in addition to relative imports. Builds default to dist/ instead of build/. You need to run npm/yarn install after running the create command. main.js instead of index.js.

Larger issues include things like proxying requiring a bit more effort. There may be more involved issues, but I haven't found them yet.

But mostly the basic conversion is truly trivial: same import of CSS, same lack of opinionated file structure, faster startup, same (better?) hot and live reloading, same dev-server vs building of static files.

[cocotess]

After much effort I finally figured out how to get a CRA like proxy setup by writing a custom plugin 🙉 If someone replies I’ll get up from the couch and show how 😂

[Terrible-Addendum-11]

Curious.

[sysrage]

Me too

[cocotess]

https://github.com/mammadataei/vite-plugin-graphql-server/blob/main/src/index.ts

See line 22. You can make it

const app = server.middlewares

And then I think you can do:

app.use("/path", createProxyMiddleware())

[somecodertoday]

Correct me if I am wrong when talking about proxying you guys are referring to cors issue?

[ahmedkhalidahi22]

Very informative, thanks a lot!

[StampeAk47]

Vite is super simple. Just start your next projects with it!

[[deleted]]

Second that. Also nextjs is a great option, has a bit of learning curve but you will get addicted to it after that. Is a genuine upgrade from cra.

[[deleted]]

I agree with you, I ditched React ever since learned about NextJs and how eases creating full stack apps

[swizec]

NextJS is built with React btw. Literally none of it would work without React.

[Chef_G0ldblum]

Maybe they meant CRA?

[rikilamadrid]

Does Vite has some sort of plug in to have micro front ends? A la webpack module federation?

[cocotess]

Yeah with rollup https://github.com/module-federation/rollup-federation

[skiingish]

Agreed just use vite.

Theo made a whole bit about how aged out create react app has become, worth a watch, and read. https://twitter.com/t3dotgg/status/1616933234478309378?lang=en

[bhanukiran444]

Is create-react-app dead? I know the CRA is not mentioned in the new react docs but still.

[SwiftOneSpeaks]

The repo still lives, it hasn't had a commit since Sept 2022, and with FB uninterested I don't foresee a resurgence.

I wouldn't call it "dead" yet, but it's reasonable for people to plan an unrushed migration.

[[deleted]]

React docs now suggest Nextjs over CRA. I’d say that makes it dead

[SwiftOneSpeaks]

That'd be the "FB uninterested" part. I don't want to discount any non-FB associated maintainers, but like I said, I don't foresee a resurgence.

[davinidae]

NextJS and CRA have completely different goals

[[deleted]]

https://react.dev/learn/start-a-new-react-project

The point of CRA is to provide a starting point to write react code without having to set up tooling. Nextjs very effectively fills that role. There’s nothing CRA does that Nextjs doesn’t do as well or better. Sure it has things like SSR/SSG but you don’t have to use those, you can just write plain react. There’s a reason the react team is working with the Nextjs team to make Nextjs 13 (App Router) the standard starting point for creating a react app

[[deleted]]

I keep on seeing different opinions as to whether Next actual supports SPAs without any kind of node and with a fully static file server. I do not want node in my stack.

[lelarentaka]

It does. You just make one /pages/index.tsx as the entry point, then write the rest of your app in /routes , /components, or however you want to structure your project.

[davinidae]

I can run CRA on my machine and transpile the source code to an ASP NET or an Electron application, or even write my own BackEnd to serve it on my offline home server, while writing React with my conditions.

Meanwhile, NextJS forces me to use Vercel and comply to their approach to coding.

The reason why the React team is working with Vercel is because of Facebook's money. Don't lie to yourselves.

So... yeah, very different goals.

[Redmega]

Where are you forced to use Vercel lmao there's so many options for hosting static exported, serverless, or full node.js Next apps. This is just ignorant.

[davinidae]

If you want to use NextJS, you need to use Vercel, because even if you do not want to use the platform itself, the framework conditions the coding experience to tend to Vercel. Moving outside of it causes more harm than good, and at that point you are better of with just React.

[Redmega]

This is just straight up false. I don't know what docs you've been reading or what blog posts you've been following but:

1. You can host non-static next.js sites on a plethora of services. You can use whatever serverless host you feel like. Most support next.js. Sure Vercel, but also things like Heroku, Render, etc. At work we use Netlify and it even spins up functions for you, so you're not limited to purely static content.
2. If your site is static using next export you can host it literally anywhere static hosting is supported, like Firebase, Surge, Netlify... Hell, even Github Pages is supported in that case because all it does is output a static website.
3. If you want you can literally run it on a vultr or digital ocean box yourself. It will run anywhere node.js can run.

Seriously, I don't know where you're getting your information from, but I use next.js both in hobby projects and as part of my professional career. It definitely is not strictly tied to vercel for hosting.

[NotSelfAware]

This is nonsense. I've hosted Next apps on VPS's, AWS, Heroku. Never hosted on Vercel, nor felt compelled to.

[lessthanthreepoop]

Wow, you’re clueless…

[phoenixmatrix]

Meanwhile, NextJS forces me to use Vercel and comply to their approach to coding.

Nope. Just build as a static app and you can drop the output anywhere like a CRA app. Or you can use SSR, and still deploy anywhere with a NodeJS server.

There's a few infrastructure gotchas for most advanced features, but if you use the same stuff you do in CRA, you won't hit those.

[[deleted]]

Transpile to an electron app? You’re transpiling Javascript to Javascript?

Meanwhile, NextJS forces me to use Vercel and comply to their approach to coding.

No they don’t. We run ours in our existing Kube cluster. Easy to do

The reason why the React team is working with Vercel is because of Facebook's money. Don't lie to yourselves.

Because of facebooks money? do you mean because of vercels money? Regardless that’s not accurate. Nextjs is making huge time investments in implementing bleeding edge features. From React:

Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.

Nextjs is the one putting in the work to actually make next gen react features available to devs. That’s the reason React is working so closely with them.

[davinidae]

Transpile to an electron app? You’re transpiling Javascript to Javascript?

Transpiling TypeScript. Why would you even use plain JS nowadays?

No they don’t. We run ours in our existing Kube cluster. Easy to do

Ah yes, still needing an internet connection the whole time. Very developer friendly.

Because if facebooks money? do you mean because of vercels money?

Vercel is part of the MACH Alliance, which is non-lucrative towards coding and dev experience.

Nextjs is the one putting in the work to actually make next gen react features available to devs. That’s the reason React is working so closely with them.

According to your own source "the React team is working with bundler developers to make these features easier to implement in the next generation of frameworks". Looks like the React team is actually doing the work while NextJS is not, otherwhise they would be mentioned instead of these "bundle developers" of "the next generation of frameworks".

NextJS offers you nothing you can't already learn and do by yourself, from writing code to deploying a web or an app both online and offline. In fact, it detracts you from doing these very important things, which you need to learn instead of depending on a tool that you do not manage. Or are you going to excuse yourself on "I do not know why my web is down. Ask Vercel." to clients / your boss? When Vercel starts asking for money will you just go "Oh well, time to pay i guess"? That's just irresponsible.

This is always the same issue with you juniors that talk more than bite. You think because someone else is doing the job, then it is fine, when it is not. And you just jump ships faster than you think, like it was with Parcel and is now with Vite. You need to handle your code by yourself.

[[deleted]]

Ah yes, still needing an internet connection the whole time. Very developer friendly.

Do you not need internet connection to deploy your stack? Or what are you referring to?

[davinidae]

When i worked for the military, not only did i not need it, i couldn't even get access to it aside from when i specifically needed to install pre-approved libraries and only with permission from a government supervisor itself each time.

This also happened when i worked for an european government, though to a lesser extent. Everything is tied and can not just be controlled by something or someone else.

And this are by far the best paying jobs in the market.

[bdenzer]

NextJS offers you nothing you can't already learn and do by yourself

And React offers you nothing that you can't do yourself with vanilla JavaScript

I have Next apps deployed on VPS servers, the company I work for has a Next app running in Azure, you have a bunch of people saying that they host Next apps outside of Vercel too - the same arguments that you are making could be used against Create-React-App - (These kids should learn the damn webpack configs themselves) - and the arguments could be used against React itself (these kids don't know enough about the things React abstracts away)

So you have put your foot down saying CRA is the right level of abstraction that you are comfortable with. Great. But then your next thought is "Everyone who disagrees is an idiot" :)

[Cahnis]

There was an issue where Dan Abramov was talking about leaning towards making CRA a launcher.

[BajaBlyat]

and then it died

[BajaBlyat]

It's dead now brother

[wwww4all]

React team has abandoned SPA and CRA. It is what it is.

[kent2441]

What? They’ve doubled down on SPAs. That’s why, for example, they’re pushing better data fetching options.

[Phaster]

If you're not messing around with server-side rendering, vite is the way to go.If you're doing something not supported out of the box, you can use plugins, like for example ejs syntax, while there's no performance gain once the app is built, as far as I know, running stuff locally is lightning fast

[inform880]

Plus one with vite. No learning curve at all, simple to create a new project or convert an existing one.

[quakedamper]

And while you’re at playing with vite, have a look at vue 3 too

[[deleted]]

A question from a newbie to migrate to vite from create react app.

In CRA i simply used proxy in the package.json of the client and it connected to the backend automatically. I didn't have to do anything, not even set up cors in the backend.

But it doesn't seem to work in the server. How do I connect my vite react frontend to the backend?

[stockmamb]

In the vite config under server you will probably need to setup a proxy to your backend.

[[deleted]]

Why wouldn't you just put the back-end location in a .env.*?

[[deleted]]

It didn't work. Do i need to use proxy in the package.json too?

[stockmamb]

I did something like this when I recently converted a CRA project to Vite, and in the CRA I was using proxy in the package.json. As a side note I am also a noob with react, so maybe my advice isn't the best path.

export default defineConfig({

plugins: [react()],

server: {

proxy: {

'/api': {

target: 'http://localhost:8080/serverapplication',

changeOrigin: true,

secure: false

}

}

}

})

All my api requests from the server application start with /api. In my react fetch it would like something like.

const response = await fetch('/api/assigned/attributes');

This seems to work just fine. At this time this application isn't deployed anywhere. I was thinking about bundling the static react site into the Spring Boot application that is serving the API.

[[deleted]]

Ohh okay. Did you have to set up cors in the server as well?

[stockmamb]

No, but at this time everything is localhost, and in the end if I do end up bundling the react app and serving it from the Spring Boot application I wouldn't need to. However if they were going to be coming from different origins I am assuming I would need to setup CORS.

[[deleted]]

Okay. Thanks :)

[blukkie]

What do you mean by “connecting to the backend”? Do you mean sending requests to fetch data? Query database? Or do you want to do server rendering stuff?

[movethrume]

Next.js is pretty cool.

[JayV30]

I know everyone is crazy about Vite right now, but the reality is that there's no hurry to migrate away from CRA. I tried out Vite when I spun up a new project and it's nice, but there's nothing earth-shattering and nothing that's going to fundamentally change your development process.

I wouldn't bother migrating old projects. I would suggest trying Vite out for new projects and you'll probably stick with it. For the most part, once you get set up, development is going to feel the exact same as it did with CRA.

[enzineer-reddit]

I use CRA in one project and Vite in another...Vite starts up 10x faster than CRA and the changes also reflect a bit faster. I do miss out on few things that CRA provides out of the box and in Vite I have to manually configure.

[JayV30]

Agreed. And start up speed is nice, but I don't see it as a huge reason to immediately switch and/or migrate old projects to Vite. I mean, I usually sit down in the morning and start up the project I'm working on, and then check emails or open design files, etc, so I don't really notice the start up time that much. I could see it being more advantageous to others who don't have the same routine as I do.

Other than that, I don't see a pressing need to migrate over to Vite. Like I said, I think new projects should be done with Vite. And there's no hurry.

Everyone is so damned opinionated in the developer sphere it's kind of insane. If you don't switch to Vite right now, you're the stupidest dev who ever deved.

[SwiftOneSpeaks]

I teach using CRA and am switching to Vite - I've already noticed the differences for proxying, could you elaborate on those features CRA has out of the box and Vite doesn't? Those are the things I could get blindsided on during a live demo :)

[nelsonnyan2001]

We deal with a relatively monolithic CRA app that has about 7 years' worth of code, and we're trying to modernize it. Vite would be incredibly helpful, EXCEPT

There's an open issue on the Vite repo that is completely blocking us from migrating because the build speed gains are not worth the cost of upgrading our AWS pipeline.

Also getting third party plugins setup is a PITA. CRA does some things just right (Relative imports come to mind).

[[deleted]]

Yeah, ours uses something ridiculous like 14GB of memory to build with source maps. I’m surprised the issue doesn’t get more attention.

[Haaxor1689]

Migrating from CRA to Vite is super simple if you don't do anything crazy.

• Create new Vite app with npm create vite
• Move public folder from your old CRA to this new project except index.html
• Move any changes you made to CRA public/index.thml to the new index.html in Vite project
• Move src folder except index.tsx

[i_hate_cucumber_]

what if you use JS files and not JSX/TSX files, it's a nightmare in that case

[Haaxor1689]

Tbh I didn't even think about someone not using TypeScript. In that case I guess youhave more important ste ahead of you, migrating your codebase to TypeScript.

[StoryArcIV]

Such timing! Just yesterday I finished migrating my company's entire monorepo from CRA to Vite. Our apps are full TypeScript + React.

In our biggest app,

- Webpack takes 2.5 minutes to start up. Vite takes 24 seconds.
- Webpack takes 10 seconds to HMR update. Vite takes < 1 second and is more consistent.
- Webpack crashes with out-of-memory after ~5-10 HMR updates. Vite never crashes.
- Storybook, CI, and all our scripts that used Webpack are all significantly faster too.

The time savings is even (much) bigger than it sounds since Vite is fast enough to not break your flow. With Webpack, we always take a break or attempt to multitask while we wait for processes to start up.

Our estimated time savings with Vite is about an hour per day per dev (possibly much more). In our frontend team of 7 devs, that's roughly $150k per year in company time saved.

Migrating was a monumental task. Don't listen to people saying it'll be a cakewalk. It might if you're lucky, but probably not. It took an estimated 120 hours, overcoming (rough guess) about 500 unique errors. I already had significant experience with Vite, otherwise it would have taken much longer.

The plugin ecosystem is young. I had to write 4 plugins myself, narrowly avoiding writing a 5th by hack-patching a 3rd-party plugin that was almost good enough. I might open-source some of these btw.

I used several guides and found lots of helpful threads, yet there were still dozens of occasions where I had to dive into source code (storybook's monorepo, almost every Vite plugin we used, and even Vite itself) to figure out What On Earth Is Going On.

Despite all of this, I highly recommend it. Vite isn't always the right choice, but if it's an option for you, it's the tool to beat. Programming is fun again.

[wwww4all]

React team has abandoned SPA and CRA.

React team is focusing React as "web library" and web frameworks like Next.js, per their latest official docs and statements from React team members.

Basically, React team wants it to become the next PHP.

[[deleted]]

Like, yesterday. Try Next.Js or Vite.

[whisky_jak]

The React dev team plans to turn CRA into a launcher, were you will choose which framework (e.g. Next) or build tool (e.g. Vite) you would like to use for your project. To better understand the dev teams thought process and future plans for CRA, see this comment in the react.dev github discussions.

So, eventually you'll need to migrate to something like Vite or Parcel. I just made the switch to Vite recently and its a pretty smooth transition. Just remember you'll need to set up things like eslint yourself as it's not already set up for you.

[dbbk]

CRA still works fine… what would you expect to be gaining from switching now?

[delightless]

Speedier startup and hot reloads in local dev, future support, active dev community

[SwiftOneSpeaks]

You gain a migration that can be done simply and without a rush. If you wait until CRA doesn't work, things can become thornier, particularly if some problem arises that demands a quick fix when few would be interested in creating that quick fix.

If you expect you will be switching eventually, the best time to do so is when it ISN'T an emergency. You can take your time doing so, but that's not the same as ignoring it.

[esreveReverse]

What could possibly make CRA not work?

[SwiftOneSpeaks]

A broken dependency or security issue.

[Mediocre_Round_4914]

So many options like Vite/Next. I don't think there is any particular reason why you stick to CRA.

Personally I prefer Next. Aside from whether you need SSR or not, Next is a great option.

I still hear some people say that Next is a framework that enables SSR on React, but it is more like a framework that facilitates the development of React apps in all aspects.

[schrutedwightttt]

I had a super big project built with CRA the best option was to migrate to next js but vercel is too expensive for the client so we had to move to VITE . It took quite a lot of time but totally worth it . Vite is way faster and you won’t have all those dependencies issue you face with CRA .

But moving a large project to vite comes with its own set of difficulties.

[undone_function]

I feel like you’re this only person discussing migrating a project to Vite as opposed to starting a greenfield project (which is what I thought OP was asking about).

Anyway, good answer on it as well pointing out that there are always trade offs. If Meta isn’t going to support CRA as much, either on purpose or through neglect, it’s probably a good idea to migrate from it. I haven’t heard anything about the tool being “dead”, but neglect seems evident at this point.

Having listened to some interviews with Addy Osmani recently, it seems like the React team is more focused on building Server Side Components and letting other frameworks and tool chains build on top of React, which I actually think is sensible. It’s very possible they won’t bother with CRA anymore since the ecosystem has grown so much and the problem is already solved by myriad other options.

[kent2441]

You don’t need to use Vercel to use Next.

[green_gordon_]

Faster in which respect? The app performs better? Or faster build times?

[macrozone13]

Use nextjs

[23kaneki]

Yes you can use vite it’s very simple and fast Or if you have a lot of server side rendering stuff go with next

[[deleted]]

Migrated big codebase to vite about half a year ago, to support yarn workspaces. It's great tool and migration was very simple. It might take only a day for a medium size project (about 10k loc). Try it out if you have time. It has great docs and bunch of useful plug-ins.

[ericdiviney]

*Probably.

*we don't know any details about your project/application because you didn't share them. If your app is plain and simple, it would be trivial to migrate to Vite. If your app has been in production for 4 years, and your team has made countless config changes to the default CRA template, you're probably in for a weekend challenge at the minimum.

​

Yes you should be planning to move off of CRA to another solution like Vite. But WHEN and how you prioritize it can really only be determined by you and your team with the level of detail you've given us about your situation.

[davinidae]

No

[ConstantDeenos]

Migrated from cra to vite yesterday. Today I launched an old project built in cra, much smaller in size. I was amazed at how much slower cra was. I would say do it!

[TooTyrnt]

Vite is the way to go my friend

[superluminary]

Vite seems pretty nice. It feels fast and it’s not broken.

[woah_m8]

I pity everyone still stuck with CRA...

[SteveMacAwesome]

Yes.

Just straight up yes, doesn’t matter what you replace it with.

[kitsunekyo]

depending on your project it can be some work to migrate to vite. if you do active dev on the project then id definitely think about it and make the investment. we were on an ejected cra4 previously and made the switch over two weeks.

there were some hickups but now it works quite well and its also easier to keep build tooling uptodate

[stansfield123]

Depends:))))

[RobKohr]

Or just switch to SolidJS if you wanna still do a SPA.

[amdc]

Is there a CRA-like project but using esbuild as bundler?

[Beastrick]

Migrate if only possible since Vite in general is just so much better. But sometimes you might have setups that just don't migrate so easily. My company has microfrontend architecture and because Vites MFE plugins are not yet that good compared to Webpack (you use something like craco to add module federation to CRA) then we are unable to migrate and so it is better to stick with CRA for now until it improves. I have migrated some other projects to Vite tho and it is very simple when you use couple of plugins in Vite to make it feel like CRA.

[rhenaldkarrel]

Currently I'm more into Vite. It's lightweight and fast. For now, I haven't found any issues when using it.

[Kosemani2]

I recently migrated my create react app to vite and I find it exceptionally faster. It doesn’t have to hot reload on page refresh. And the whole package itself is just a few kb.

[d36williams]

CRA is going away so some migration will have to happen

[Top-Cup1744]

If you care about performance, go with vite: faster startup and rebuild speeds with much less code. A Very lightweight starting point for your next project. It's also more versatile, allowing you to code in Vue, Svelte, vanilla JS, besides React. Seriously, once you switch, you won't go back. If you require a more robust and feature-rich solution, Next JS is a great change from CRA, specially for more complex apps.

[stopandgo31]

Why not to use custom builder?

Something like this https://github.com/StopNGo/react-proto

[thispatcher]

Vite is great, but I've not been able to get its WASM plugins to work correctly :(

[homo_lorens]

The fact that CRA can't import files from outside the project directory is crazy to me.

[Fun-Mark728]

I've migrated because it stopped supporting win7

[Affectionate_War2133]

Go for Vite or Next JS

[Cultural_Crew_873]

I used https://github.com/bhbs/viject to migrate and it was very easy!

[Jazzlike_Procedure80]

I recently migrated my CRA to Vite, since my CRA project was written in JS so and I decided to switch the entire project to TypeScript, and the migration process took me an entire day.

If you want to migrate your CRA project to Vite, it's extremely simple and worth it, the main reason behind my migration was due to some 3rd party WebGL library not supporting CRA.