DEV Community

Maybe I Should Have Just Used create-react-app

Harriet on May 08, 2019

I've recently been working on improving the performance of a personal side project I've been working on, Conju-gator.com, a little app for practici...
Collapse
 
stereobooster profile image
stereobooster

For small projects (or prototype or MVP) I would use CRA + react-snap + S3 (or netlify) + CloudFlare. I just don't want to spend time to configure webpack, eslint, postcss etc. I want to spend more time writing actual code.

Collapse
 
harri_etty profile image
Harriet

Agree that time spent writing business logic > time spent writing config! But what happens when your project needs something changing? Or you want to do a major version upgrade of webpack, for example? Invest the time at that point to solve that problem when you get to it? I guess you can't plan for the future!

Collapse
 
stereobooster profile image
stereobooster • Edited

Or you want to do a major version upgrade of webpack, for example

Exactly the point of CRA. They upgraded from webpack 3 to webpack 4. I needed to bump only version of CRA, without changing anything else. Less than a minute of work. How much would you spend updating your handcrafted config?

Thread Thread
 
harri_etty profile image
Harriet

Ah right! Thanks! So would you recommend not ejecting CRA in this case, or can this upgrade still be done if CRA is ejected? Would there be any other downsides to not ejecting CRA?

Thread Thread
 
stereobooster profile image
stereobooster • Edited

If you eject you are on your own, so they recommend to create separate git commit when you eject, so you can undo this. I had projects with CRA, I never needed to eject. With babel-macros need to eject is close to 0.

Collapse
 
vijaynavale profile image
Vijay Navale

What does react snap do?

Collapse
 
sleepyfran profile image
Fran González • Edited

I think that in order to learn you need to go through all of these steps, after all if you just used create-react-app you wouldn't have realized what was going on under all those commands; but after you learn what happens, why it matters and how it works, doing it all by hand is just going to slow you down, specially when starting a project.

P.S.: Tu aplicación es genial :)

Collapse
 
harri_etty profile image
Harriet

Thank you! I agree about needing to do the configuration yourself, at least a few times, to fully learn what it's doing. I feel sorry for people who learn React and begin with CRA - it's a great place to start but it's also overwhelming to see so much configuration and have no idea what's going on!

Collapse
 
dmwyatt profile image
Dustin Wyatt

Well, once you create a webpack config you hardly need to change it between projects. This means the only thing you do is copy it when you start a project.

Aftr that it's much easier when you need to change something.

Collapse
 
allurewebsolutions profile image
Mike Doubintchik

Could you please share you config of how you got Webpack Bundle Analyser working with the latest versions of CRA?

I'm trying the command react-scripts build --stats but it's not generating the bundle-stats.json file needed for bunde analyser.

Collapse
 
harri_etty profile image
Harriet

Hmm react-scripts is a create-react-app thing isn't it? In that case I'm not sure as I didn't use CRA and I had the option of adding the Webpack Bundle Analyser to my webpack configuration. Maybe this helps?

medium.com/@jbandi/you-can-use-cre...

Collapse
 
bugzpodder profile image
bugzpodder

This feature was deprecated in CRA 3.0. The recommended way is to use source-map-explorer:
facebook.github.io/create-react-ap...

You may have to remove the single quotes if you are on windows:
npx source-map-explorer build/static/js/*.js

Collapse
 
allurewebsolutions profile image
Mike Doubintchik

Yes, but I was hoping to get it working with the bundle analyzer as it has a better interface.

Thank you for confirming CRA 3.0 removed the bundle stats.

Collapse
 
bvalyou profile image
bvalyou

I have a larger side project that I recently migrated from manual webpack to CRA and found it to be an overall win. My explicit configuration is now limited to eslint, everything else is free*.

What I would recommend is installing react-scripts in your project, running “react-scripts start” and if it works, just roll with it. I gradually migrated my tests to use it but had it managing my builds for a few weeks before I made that jump.

Collapse
 
harri_etty profile image
Harriet

Thanks for the recommend of react-scripts, not really looked into this package before but will bear in mind for future CRA projects!

Collapse
 
bvalyou profile image
bvalyou

Sure thing! To clarify, CRA itself is an executable dependency that sets up a project, dependencies, and initial commit. React-scripts is what you wind up with when it’s done.

Collapse
 
quadsurf profile image
Chris Castro

I love your Conju-gator app. Great for adults and adnvanced learners, but for kids or intermediate level learners, it’s too hard.

I would even pay a subscription for “kid-mode” if all the answers were multiple choice, then once they level-up enough, then send them to advanced levels where they have to spell it out.

Collapse
 
harri_etty profile image
Harriet

Aw thank you! Yeah it's definitely the case of me building something which was precisely what I wanted and not really thinking about anyone else haha! Really appreciate your feedback, as I develop it I'll definitely be thinking about how I can make it more useful for other people too. That's a great idea about multiple choice questions!

Collapse
 
wommy profile image
Tommy Williams • Edited

maybe you should have just used gatsby and netlify

Collapse
 
harri_etty profile image
Harriet

hahaha yes maybe! Love gatsby and netlify but my app doesn't really have any content, just some verb data it needs to fetch, so a static site generator was probably overkill here!

Collapse
 
mvasigh profile image
Mehdi Vasigh

Totally agree with your thoughts on CRA. While I like that it abstracts away build tooling, I think that the moment you have to eject you pay for it big time.

My preferred approach nowadays would be to initially start with something like Parcel and if a use case for something like Webpack surfaces, then configuring Webpack manually so that I know what goes into my Webpack config and how to maintain it.

Collapse
 
harri_etty profile image
Harriet

Interesting, would love to take a look at Parcel!

Collapse
 
rampa2510 profile image
RAM PANDEY

That's the reason I love using create-react-app it takes care of the little things so you can focus on the bigger picture

Collapse
 
clamstew profile image
Clay Stewart • Edited

I used ejected CRA on a substantial work project because we wanted to use postcss plugins and spread operators. We at some point switched to emotion and CRA built in some of the Babel niceties we wanted. Then in the last 6 months I unejected it. It’s really all you need.

I found everything I wanted to customize from CRA could be done with simple node scripts run after react-scripts build in yarn build. Like I didn’t like source maps. So I wrote a node script to remove them from /build.

Collapse
 
bugzpodder profile image
bugzpodder

You can turn off sourcemaps by setting GENERATE_SOURCEMAP=false yarn build facebook.github.io/create-react-ap...

Collapse
 
ricardofuzeto profile image
Ricardo Fuzeto

your reflections seem to be just a part of the natural process of experiencing Webpack. But it's absolutely NOT recommended to go with CRA as-is for developing projects to be deployed. According to Facebook crew itself, CRA should only be used for prototyping and testing, as their Webpack configuration is extremely shallow and optimized only for development purposes.

Knowing Webpack is mandatory if you wish to achieve performace levels such as the ones mentioned above. However, nowadays it's better to start off with CRA as there are libs that allow to extend CRA's config "on the fly", and that would be the best option to use when creating new projects with CRA and that are intended to go live.

Collapse
 
bugzpodder profile image
bugzpodder • Edited

Hi, I'm one of the current maintainers for create-react-app (we don't work at Facebook), and I want to point out that CRA is absolutely production ready. All of us have real world apps built using CRA's webpack configs. One exception is when you need SSR in production then CRA might not be the best tool to use out of the box, but SSR could be supported in a future version (there's already a PR out for it).

Collapse
 
tonycaputo profile image
Antonio Caputo

There are a lot of situations where ejecting a CRA app is not enough.
It's a great tool, but just if you need a small app, which probably will be small in a final bundle.
If you go deeply within a webpack configuration and you use some tasks runner like ( Gulp or others ) you can achieve exceptional results.