CRA Alternatives for SPA
Happy Monday everyone!
I just wanted to check from some people that are likely more informed than me on this. Right now my employer has most everything built with CRA. This has for the most part not really mattered for us, but in one particular app we're needing to use libraries to sort of "crack open" the build and modify it - libraries which don't seem to really be maintained at this point. I'm going to be starting a spike to examine alternatives for us, as we're making major changes and have been given the go-ahead to modernize a few things (e.g. JS to TS, getting rid of CRA).
Unless I'm mistaken, I believe my employer would like to keep the app as a SPA, as they want it to exist in an S3 bucket without having a server (app doesn't have any need for SEO so it's been deemed unnecessary).
My go-to choice would be Vite, but my employer is using webpack for bundling everywhere, and they tend to be conservative about diversifying tools. Are there any other good tools for SPA, without using CRA and using webpack for bundling? I could set the project up manually, but I wanted to check if there's anything similar to Vite, with convenient and sane defaults for the build, but which uses Webpack instead.
10 Replies
vite
unless you have a very extreme webpack configuration
default vite is good enough for most of things
That will 100% be the recommendation I will fight for. In the event that there is an extreme Webpack config, or it's determined they refuse to migrate off of Webpack, is the best option at that point to simply roll it manually to get rid of CRA?
you can check if the webpack custom config is supported by vite with no or little effort
Oh can you run a build through Vite with Webpack? I tried looking that up but didn't find any results. I might just be bad at looking.
webpack custom config can be done with vite with no or little effort
Thank you so much for the timely and helpful response. That's fantastic.
The only other question, which of course I can try and figure myself, would be if there's a relevant page in the docs that would be helpful if that becomes necessary you could link to.
GitHub
vite-plugin-react/packages/plugin-react at main · vitejs/vite-plugi...
The all-in-one Vite plugin for React projects. Contribute to vitejs/vite-plugin-react development by creating an account on GitHub.
also there is an interesting plugin for folder based routing if ur interested https://github.com/oedotme/generouted
GitHub
GitHub - oedotme/generouted: Generated file-based routes for Vite
Generated file-based routes for Vite. Contribute to oedotme/generouted development by creating an account on GitHub.
Hey thanks! It looks like maybe I was misunderstanding, and Webpack can't be used with Vite (at least not easily). This is pretty old, but this issue would seem to suggest bundler isn't something that's really configurable: https://github.com/vitejs/vite/issues/1835
GitHub
Consider configurable bundler? · Issue #1835 · vitejs/vite
Is your feature request related to a problem? Please describe. Vite uses Rollup for the production bundling step. Sadly this is a bit of a deal breaker at the moment for me because of code-splittin...
My issue is primarily one of optics. I fully recognize that as a rule, I should be able to do with Vite what I need to do. However, I need to be able to use the tool my employer allows. And there's a decent chance they say "npmtrends indicates Webpack is still head over heels more popular, and build time isn't a primary concern", and at that point I'll need to figure out how to rid us on CRA, while retaining Webpack and making the DX as good as it can be given those constraints.