5 ms·

> I have done a lot of React in the last 6 years and have never been frustrated with their decisions, which is very rare. Same, but this is also why I feel bur

by ng12 6y ago

> I have done a lot of React in the last 6 years and have never been frustrated with their decisions, which is very rare. Same, but this is also why I feel burnt by create-react-app. There's so many important features the team has simply decided it won't support. One of the biggest issues with the React ecosystem is that there's nothing in between training wheels (CRA) and a motorcycle (rolling your own config). Maybe there's an opportunity for a new project there.

lucassen 6y ago
to be honest, Id say the next level abstractions(gatsby and next) fill that role. I can’t think of a SPA alternative though
hn_throwaway_99 6y ago
I totally agree. If you need access to one config variable CRA doesn't support out of the box, your only option is to eject. I really wish there were the option of just providing an "overlay" file that only had your changes from the CRA defaults, rather than being forced to eject the whole config.
- ht85 6y ago
  See sibling comments for solutions to do exactly that.
- nawgszy 6y ago
  I think there's a couple repos that provide exactly that - a webpackOverrides.js file or something similar. I also think that next.js might have some of what the gp is interested in
- ThePadawan 6y ago
  I can only second what ht85 said in a sibling comment. I have the same complaint, but this is definitely possible using e.g. react-app-rewired. Adding custom webpack loader rules is as simple as replacing the calls to react-scripts with calls to react-app-rewired and adding a .js file with your customizations.
- acemarke 6y ago
  There are multiple existing third-party tools in the ecosystem that let you do exactly that: - https://github.com/gsoft-inc/craco https://github.com/gsoft-inc/craco - https://github.com/harrysolovay/rescripts https://github.com/harrysolovay/rescripts - https://github.com/timarney/react-app-rewired https://github.com/timarney/react-app-rewired - https://github.com/arackaf/customize-cra https://github.com/arackaf/customize-cra No, they're not "officially" supported, and you basically void the warranty by poking the configs manually, but the tools do what you want them to do.
  - hn_throwaway_99 6y ago
    Thank you, this list is much appreciated.
  - arvinsim 6y ago
    But I think that is the problem. Since there are many ways to do it, you will have to evaluate each one and hope the one you pick gets upstream updates.
    - acemarke 6y ago
      I'd go with `craco`, personally.
alpinacloud 6y ago
Not sure if I understood you correctly, but if I did then you can use react-app-rewired https://github.com/timarney/react-app-rewired https://github.com/timarney/react-app-rewired
cstuder 6y ago
From the official docs: Alternatives to Ejecting. https://create-react-app.dev/docs/alternatives-to-ejecting/ https://create-react-app.dev/docs/alternatives-to-ejecting/
ht85 6y ago
I've has a lot of success using react-app-rewired to do small changes to the webpack config. You avoid ejecting and benefit from upgrades to CRA, but you can customize anything you like. There's a `customize-cra` lib that provides useful helpers that you can use to perform the most common operations.
- stimpson_j_cat 6y ago
  > to do small changes to the Webpack config 90% of the reason I eject CRA. rewired is essential.
k__ 6y ago
"there's nothing in between training wheels (CRA) and a motorcycle" AFAIK the "betweens" are Next.js, Blitz.js, Gatsby, Remix, Expo, etc.
- ng12 6y ago
  I like Next.js quite a bit but I don't need SSR. To expand upon my use case a bit: I need a way to create dozens of small SPAs in an enterprise environment maintained by people who are not front-end experts. CRA fits the bill almost perfectly except it makes certain Webpack/Babel configs unavailable that make my life very difficult. The token response from the CRA team tends to be: we don't think you need this, fork or eject. Eventually I'll end up maintaining a company fork. It's more work for me but that's life. It's really just the dogmatic attitude of the CRA team that irks me.
  - k__ 6y ago
    CRA focuses on the very basics, so it's probably not suited for your problem. Can't you switch Next.js to SSG for all routes since v9?
    - ng12 6y ago
      CRA is exactly suited to my problem: these are simple React front-ends. I don't want any sort of server-side rendering. I don't need any of the features from Next.js. I just the ability to modify some of the basic configs that are hard-coded in CRA for unclear reasons.
      - TuringTest 6y ago
        When there is a clear case of use like this, the usual procedure is to create and publicize your fork. If enough people start using it, the original maintainers will see the need it covers, and hopefully will get rid of their dogmatic attitude, seeing how real people are adopting the approach they found no value in.
        6y ago
ahupp 6y ago
Check out craco, for overriding specific bits of config without ejecting: https://github.com/gsoft-inc/craco https://github.com/gsoft-inc/craco
- ng12 6y ago
  I've been using craco. I really commend the creators but it's a project that shouldn't exist. I shouldn't have to hack the officially supported solution to do simple things like provide my SSL cert to Webpack or tweak some Babel config.

by ng12 6y ago

lucassen 6y ago

to be honest, Id say the next level abstractions(gatsby and next) fill that role. I can’t think of a SPA alternative though

hn_throwaway_99 6y ago

I totally agree. If you need access to one config variable CRA doesn't support out of the box, your only option is to eject. I really wish there were the option of just providing an "overlay" file that only had your changes from the CRA defaults, rather than being forced to eject the whole config.

ht85 6y ago
See sibling comments for solutions to do exactly that.
nawgszy 6y ago
I think there's a couple repos that provide exactly that - a webpackOverrides.js file or something similar. I also think that next.js might have some of what the gp is interested in
ThePadawan 6y ago
I can only second what ht85 said in a sibling comment. I have the same complaint, but this is definitely possible using e.g. react-app-rewired. Adding custom webpack loader rules is as simple as replacing the calls to react-scripts with calls to react-app-rewired and adding a .js file with your customizations.
acemarke 6y ago
There are multiple existing third-party tools in the ecosystem that let you do exactly that: - https://github.com/gsoft-inc/craco https://github.com/gsoft-inc/craco - https://github.com/harrysolovay/rescripts https://github.com/harrysolovay/rescripts - https://github.com/timarney/react-app-rewired https://github.com/timarney/react-app-rewired - https://github.com/arackaf/customize-cra https://github.com/arackaf/customize-cra No, they're not "officially" supported, and you basically void the warranty by poking the configs manually, but the tools do what you want them to do.
- hn_throwaway_99 6y ago
  Thank you, this list is much appreciated.
- arvinsim 6y ago
  But I think that is the problem. Since there are many ways to do it, you will have to evaluate each one and hope the one you pick gets upstream updates.
  - acemarke 6y ago
    I'd go with `craco`, personally.

alpinacloud 6y ago

Not sure if I understood you correctly, but if I did then you can use react-app-rewired https://github.com/timarney/react-app-rewired https://github.com/timarney/react-app-rewired

cstuder 6y ago

From the official docs: Alternatives to Ejecting. https://create-react-app.dev/docs/alternatives-to-ejecting/ https://create-react-app.dev/docs/alternatives-to-ejecting/

ht85 6y ago

I've has a lot of success using react-app-rewired to do small changes to the webpack config. You avoid ejecting and benefit from upgrades to CRA, but you can customize anything you like. There's a `customize-cra` lib that provides useful helpers that you can use to perform the most common operations.

stimpson_j_cat 6y ago
> to do small changes to the Webpack config 90% of the reason I eject CRA. rewired is essential.

k__ 6y ago

"there's nothing in between training wheels (CRA) and a motorcycle" AFAIK the "betweens" are Next.js, Blitz.js, Gatsby, Remix, Expo, etc.

ng12 6y ago
I like Next.js quite a bit but I don't need SSR. To expand upon my use case a bit: I need a way to create dozens of small SPAs in an enterprise environment maintained by people who are not front-end experts. CRA fits the bill almost perfectly except it makes certain Webpack/Babel configs unavailable that make my life very difficult. The token response from the CRA team tends to be: we don't think you need this, fork or eject. Eventually I'll end up maintaining a company fork. It's more work for me but that's life. It's really just the dogmatic attitude of the CRA team that irks me.
- k__ 6y ago
  CRA focuses on the very basics, so it's probably not suited for your problem. Can't you switch Next.js to SSG for all routes since v9?
  - ng12 6y ago
    CRA is exactly suited to my problem: these are simple React front-ends. I don't want any sort of server-side rendering. I don't need any of the features from Next.js. I just the ability to modify some of the basic configs that are hard-coded in CRA for unclear reasons.
    - TuringTest 6y ago
      When there is a clear case of use like this, the usual procedure is to create and publicize your fork. If enough people start using it, the original maintainers will see the need it covers, and hopefully will get rid of their dogmatic attitude, seeing how real people are adopting the approach they found no value in.
      - 6y ago

ahupp 6y ago

Check out craco, for overriding specific bits of config without ejecting: https://github.com/gsoft-inc/craco https://github.com/gsoft-inc/craco

ng12 6y ago
I've been using craco. I really commend the creators but it's a project that shouldn't exist. I shouldn't have to hack the officially supported solution to do simple things like provide my SSL cert to Webpack or tweak some Babel config.