[Spike] Exploratory work to standardize build systems

[jpellizzari]

The different build systems of EE and wego core are causing an irreconcilable problem where Core builds are slow because of the image-inline-ing directive that webpack needs:

https://github.com/weaveworks/weave-gitops/issues/1916

We should investigate the work involved to standardize build systems. We can stick with parcel or move to esbuild or some other flavor-of-the-month JS build system.

[jpellizzari]

Also, while we are at it, lets standardize on yarn as well. We already use it on both EE and the docs website. I had originally chosen npm as it is easier to adopt, but it turns out we were already using yarn everywhere.

[ahussein3]

what about going CreateReactApp so that we have standard between both projects dependency as well ? what do you think @jpellizzari ?

[foot]

In the context of being able to import core w/ svgs..

Vite

I tested out vite while looking at esm modules as a fix for https://github.com/weaveworks/weave-gitops/pull/1917

Out of the box it was able to handle esm + images in the production build but dev server didn't copy them across to the dev hosted assets properly. I meant to see if that was a config option somewhere.

Vite is very fast (like, the HMR updates faster than you can cmd-tab back to the browser), uses esbuild under the hood.

Vite poc on EE from a little bit ago:

• https://github.com/weaveworks/weave-gitops-enterprise/compare/vite-poc-2022-04

Parcel

I haven't been able to get the svg -> component thing working, it seems to be broken for now =/ https://github.com/parcel-bundler/parcel/issues/6688

So if we drop svgr this should work.

CRA

Out of the box I can't figure out how to load svgs from another module.

https://github.com/weaveworks/weave-gitops/pull/1917#issuecomment-1106646422

We might be able to eject to make this work w/ craco and more webpack conf.

[jpellizzari]

what about going CreateReactApp so that we have standard between both projects dependency as well ? what do you think @jpellizzari ?

In my experience CreateReactApp, adds a lot of unnecessary cruft and magic that does more harm that good, as it abstracts the underlying webpack stuff. Our current situation is a perfect example of that.

[ahussein3]

@jpellizzari I though our current situation because we have two different build system. is there a ticket or something explaining what is the situation exactly ?

[jpellizzari]

@ahussein3 You are correct, but we cannot resolve the situation because our webpack config is hidden by CRA

[foot]

is there a ticket or something explaining what is the situation exactly ?

This guy! https://github.com/weaveworks/weave-gitops/issues/1916

Which is roughly: we want to publish weave-gitops core as a node module of components, some of those components use svg images.

We haven't figured out how to bundle svg images in a node module nicely. Our solution right now is to inline the svg data, this is not great.

[mnowster]

tagging @ozamosi for visibility, if we unify on package manager etc this will be changes in core 👍🏻

thanks @jpellizzari for this spike ✨

[ahussein3]

@jpellizzari we can eject and manage the config files ourselves but that is one way to go.

[jpellizzari]

@foot I added some commits and rebased main on your vite PoC branch and it looks to be working with the normal url: directives in core (tested locally):

https://github.com/weaveworks/weave-gitops-enterprise/pull/755

Would you mind pulling it down and testing?

[jpellizzari]

Results of the spike are:

https://github.com/weaveworks/weave-gitops-enterprise/pull/755 https://github.com/weaveworks/weave-gitops/pull/2163

Closing the spike