hydrogen icon indicating copy to clipboard operation
hydrogen copied to clipboard

Consider removing vite.config.js

Open jplhomer opened this issue 3 years ago • 2 comments

Hydrogen is powered by Vite.

On the surface, it looks a lot like a standard Vite project, because we have a vite.config.js file with a simple hydrogen() plugin.

However, this is misleading:

  • Hydrogen's plugin does a BUNCH of stuff — introduces virtual modules, CSS processing for server components, SSR, etc. This likely interferes with behavior a developer might want to introduce if they are familiar with Vite — behavior which could be incompatible with Hydrogen.
  • We often are tempted to say "Hydrogen is a Vite project — go to Vite's docs to learn more about X." But this is not a good strategy, as Hydrogen customizes Vite so much that we should be supporting the breadth of documentation needed.
  • It's probably easy to screw up Hydrogen by introducing other Vite plugins.

To solve these problems, we should consider removing vite.config.js from the starter template, and adding a vite property to hydrogen.config.js, which was introduced in #1065.

This allows the developer to override certain Vite settings and apply plugins, but it's clear that the ability to customize Vite is merely an escape hatch allowed by Hydrogen and not a core expectation. This is similar to the behavior Next.js uses to customize Webpack.

To do this, we likely need to switch to a dedicated hydrogen dev and hydrogen build command rather than raw vite and vite build. There are additional benefits to this, too, like being able to provide better error messaging. I believe @cartogram is already working on this specific thing.

jplhomer avatar Apr 15 '22 19:04 jplhomer

@frandiox — in the Plugin system you're exploring, we should follow through on this and remove the vite config file — though it would be nice to be able to eject this if necessary

benjaminsehl avatar Jul 22 '22 02:07 benjaminsehl

@benjaminsehl Yes, I've had this in mind for a while and some of the recent changes will make this possible. This will be implemented after the plugins.

One of the reasons I'm trying to introduce plugin/vite.js and so on is basically to remove vite.config.js. Plugins will be able to pass optimizeDeps and similar without the user doing anything. Eventually, we will be able to remove vite.config.js and allow users to create it to optionally add their own Vite config without doing anything Hydrogen-related in that file. In this case, it wouldn't even be considering "ejecting" since it's a completely optional file they add on their own.

frandiox avatar Jul 25 '22 10:07 frandiox