4 ms·

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.

mattmanser 2y ago
Vite is great, don't know why you'd make your own life hard like that.
- auggierose 2y ago
  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.
  - lyxell 2y ago
    With Vite you do not have to hack together Hot Module Reloading yourself.
    - Aldipower 2y ago
      Thanks, so I won't use vite. Hot Module Realoading never worked reliable to me.
      - lyxell 2y ago
        I can’t speak for how it works in other frameworks but HMR for React works flawlessly in Vite.
      - conradfr 2y ago
        Because you did not use Vite.
      - homebrewer 2y ago
        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.
    - auggierose 2y ago
      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?
      - yurishimo 2y ago
        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.
        auggierose 2y ago
        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.
        lyxell 2y ago
        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.
        ativzzz 2y ago
        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
arbol 2y ago
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).
- Aldipower 2y ago
  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. :-)
  - arbol 2y ago
    Fair point. But vite makes this easier than esbuild. I get a bundle that's immediately executable with node
- silverwind 2y ago
  Vite uses esbuild only during development, in the build it uses rollup.
  - auggierose 2y ago
    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.
    - solarkraft 2y ago
      Has this happened to you? I expected this to happen to me, but I’ve never noticed a disparity.
      - auggierose 2y ago
        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.
o_m 2y ago
It can be simplified even more if you just use Deno and don't bundle.
- auggierose 2y ago
  I've looked at Deno, but I don't see any advantage of it over my simple stack.
JoeyJoJoJr 2y ago
> 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.
rk06 2y ago
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
- auggierose 2y ago
  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.

mattmanser 2y ago

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

auggierose 2y ago
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.
- lyxell 2y ago
  With Vite you do not have to hack together Hot Module Reloading yourself.
  - Aldipower 2y ago
    Thanks, so I won't use vite. Hot Module Realoading never worked reliable to me.
    - lyxell 2y ago
      I can’t speak for how it works in other frameworks but HMR for React works flawlessly in Vite.
    - conradfr 2y ago
      Because you did not use Vite.
    - homebrewer 2y ago
      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.
  - auggierose 2y ago
    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?
    - yurishimo 2y ago
      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.
      - auggierose 2y ago
        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.
        lyxell 2y ago
        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.
        ativzzz 2y ago
        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

arbol 2y ago

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).

Aldipower 2y ago
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. :-)
- arbol 2y ago
  Fair point. But vite makes this easier than esbuild. I get a bundle that's immediately executable with node
silverwind 2y ago
Vite uses esbuild only during development, in the build it uses rollup.
- auggierose 2y ago
  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.
  - solarkraft 2y ago
    Has this happened to you? I expected this to happen to me, but I’ve never noticed a disparity.
    - auggierose 2y ago
      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.

o_m 2y ago

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

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

JoeyJoJoJr 2y ago

> 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.

rk06 2y ago

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

auggierose 2y ago
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.