Don't replace CRA about create-react-app

[Ali-Milani-13]

This can be solved by the community maintaining the CRA package and offering a prompt style choice as with nextjs.

While just a draft a prompt like this offers more advanced configurations such as Federated Modules in Webpack for microfrontends or custom builds with Metro. Besides the obvious quick vite config.

npx create-react-app

Name of your app? 

Is this app being built for production? 
Production
Development 

Choose a Bundler
Vite
Babel
Metro
Webpack

Choose 1
Javascript
Typescript
FlowJS

that will solve part of the problem. CRA creates lots of convince. I don't have to define proxy middleware in my webpack config file or Vite config to proxy api requests.

I just need to add, proxy option in the package.json

having both css and scss + module support is also tricky when it comes to other bundlers, even if they offer built in support for sass, if you want to have css and scss modules together, it will create quirks.

same goes for PWA support, which needs plugin for build tools like Vite. but in CRA you can directly attach service worker to the index.html.

%PUBLIC_URL support for index.html is also great.

there are lots of great features.

after all, CRA saves you lots of time. I tried to build projects with Vite, Parcel and webpack (custom configuration) and no of them were straightforward as CRA. you might not see an issue in right after the project build but it will show problems throughout the project.

[ahmadi3d]

@Ali-Milani-13 This might be a tad out of context, but I've always been using create-react-app. Now that I'm planning to start a huge project, after lots of research and testing, I felt Vite was the way to go. However, your comments did make me hesitate. Can you explain some of these "it will show problems throughout the project" issues that you saw, for example, in Vite? Thank you!

[bayareaunicorn]

This can be solved by the community maintaining the CRA package and offering a prompt style choice as with nextjs.

While just a draft a prompt like this offers more advanced configurations such as Federated Modules in Webpack for microfrontends or custom builds with Metro. Besides the obvious quick vite config.

npx create-react-app

Name of your app? 

Is this app being built for production? 
Production
Development 

Choose a Bundler
Vite
Babel
Metro
Webpack

Choose 1
Javascript
Typescript
FlowJS

[Ali-Milani-13]

@ahmadi3d

Hi there.

so, these were couple of the issues I've encountered so far. ( I don't remember all of them )

1. you will be heavily reliant on tools like "linter". from what I understood about hot module replacement (HMR), if you forget to import something, Vite will not have any clue about it. it won't give you any error message, just a blank page.
   I've had my linter tool broken and exact same thing happened.
   I couldn't even get an error on console to see what was happening. I did it with debugger and things like that to find the issue.

CRA only gives you blank page if you have uncaught exceptions and even then, you can check your console and find the exact issue.

2. same goes for index.html file. you can work it the way you do in CRA. for example, with PUBLIC_URL. you have to configure module bundler (vite.config.js) if you want to do something with index.html. as I said I can't really afford this time to put on it.

3. if you use css and sass modules together, it will introduce lots of bugs. although this issue is not unique to Vite. Parcel and Rsbuild have the same issues even if you manually create your own webpack react project, it will also cause this issue. so, only CRA works with it fine.

4. as far as I know, source mapping is still problematic in Vite. I haven't encountered any issue with source map on CRA.

I don't want to mock any open-source project. keep that in mind. for my use case, I really want to stick with CRA. so, if Vite floats your boat, go for it. since CRA is extremely slow during dev mode + tailwind doesn't go well with CRA because of postCSS issues.

so, you have to make your own decision. what everything comes with tradeoff.

I traded couple seconds of build and compile time + EXTEREMLY large module bundler to have a framework like experience and everything just works.

keep that in mind. I consider CRA as a "semi framework" for React. it has its own structure and capabilities. but once you want more or a little bit customization, you will have to either eject it or use react-app-rewired.

[Ali-Milani-13]

@ahmadi3d
right now, my only problem are the security vulnerabilities because of outdated dependencies and if CRA fixes this issue, it still worth and I will continue using it.
I believe to what I've said in my bio.