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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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!
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?
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?
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.
What does react snap do?
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 :)
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!
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.
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 --statsbut it's not generating thebundle-stats.jsonfile needed for bunde analyser.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...
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
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.
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.
Thanks for the recommend of react-scripts, not really looked into this package before but will bear in mind for future CRA projects!
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.
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.
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!
maybe you should have just used gatsby and netlify
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!
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.
Interesting, would love to take a look at Parcel!
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
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.
You can turn off sourcemaps by setting GENERATE_SOURCEMAP=false yarn build facebook.github.io/create-react-ap...
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.
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).
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.