Hacker News Reader

Comment by auggierose | Hacker News Reader

Both CRA and Vite seem to be a mess, I don't know how people work with that.

My recommended stack: node, npm, typescript and esbuild.

> Both CRA and Vite seem to be a mess

CRA, yes. Vite, not in my experience. Vite does what it says it does, gets out of your way, is configurable enough when you need it to be, and has great testing tools. I don’t think I’ve ever had an issue with Vite.

Vite is great, don't know why you'd make your own life hard like that.

On the contrary, this stack makes my life as comfortable as possible.

I do understand esbuild, I don't understand whatever it is that Vite does.

With Vite you do not have to hack together Hot Module Reloading yourself.

Thanks, so I won't use vite. Hot Module Realoading never worked reliable to me.

Because you did not use Vite.

CRA's HMR is a mess that breaks more often than it works, but I haven't had any problems with Vite's HMR after using it for the past three (I think?) years.

I can’t speak for how it works in other frameworks but HMR for React works flawlessly in Vite.

esbuild has live reloading, which works great. No hacking needed.

Edit: I don't know how Vite's HMR works, but it wouldn't surprise me if it is just piggybacking on esbuild's live reloading. Anyone here knows if there is a difference between the two?

When you say "live reloading", does that mean updating the component while maintaining state (HMR) or just triggering some sort of global page refresh?

My guess is that Vite relies on underlying tools as much as possible and only ejects when they need to. This is also why they are writing their own version of esbuild/rollup so that more of the dev pipeline can be controlled by Vite.

What I mean by "live reloading" is that when you for example save a TypeScript file, esbuild does an incremental build and your webpage can check for that and reload. There is no state maintained. I think maintaining state would be a very difficult problem to solve correctly. Actually, I think that is impossible, and invites all sorts of heisenbugs, working only for simple cases.

I’ve used both standalone esbuild as well as Vite for hundreds of hours and HMR works flawlessly in React using Vite, it’s the only reason I use Vite instead of just using esbuild directly. I suggest you to try it out.

I've been working with web apps for a long time and have always turned live reloading off whenever I can.

My code editor always auto saves changes so i just alt tab to browser and refresh to see changes

With live reload, often what happens, especially as projects get larger, is the watcher takes longer to trigger so the live reload is slower than just alt-tabbing, and it sometimes goes off on its own, probably due to multiple quick file changes, which is really annoying

I've never enjoyed this feature

It must not be that difficult as I use it every day in my Vite project. To be clear I am no Vite evangelist, but it does maintain existing state when it live reloads modules, it doesn't just refresh the page.

Vite uses esbuild under the hood. It can also create bundles with all your deps, which is essential when you don't want an npm i step involved during deployment (lambdas/containers).

To be clear, it is esbuild that bundles not vite.

esbuild index.js --bundle --outfile=build.cjs --format=cjs --platform=node

You can use pkg then to make this bundle executable.

pkg build.cjs

This is not vite. :-)

Fair point. But vite makes this easier than esbuild. I get a bundle that's immediately executable with node

Vite uses esbuild only during development, in the build it uses rollup.

Yes, I've noticed that. So to debug problems I need to know both rollup and esbuild, and how exactly Vite configs boil down to configs for these two.

Has this happened to you? I expected this to happen to me, but I’ve never noticed a disparity.

I've run into problems with Vite when I was using it for electron, and I could not figure out how to fix it. I needed to create a new project from scratch. Vite seems in general to be fast moving, and software depending on it breaks easily.

some people value HMR in development, and like lots of build plugin. esbuild plugin support is not that great, hence they put up with vite. Case study: Remix went from esbuild ot vite

I tried Remix, and boy, this is a real mess. Some people just don't value understanding what their code and configuration actually does, I guess. I can assure you, it saves a lot of time if you do. I don't like plugins, especially when the documentation for how plugins work is non-existent or seems to have been written by children.

It can be simplified even more if you just use Deno and don't bundle.

I've looked at Deno, but I don't see any advantage of it over my simple stack.

Reply on news.ycombinator.com