Sync cdp-frontend's npm commands for the app with cookiecutter-cdp-deployment's npm commands

[tohuynh]

cdp-frontend currently uses snowpack as frontend build tool, while cookiecutter-cdp-deployment use react-scripts.

The commands to start the app locally and build the app should be the same between the two repos.

Also, add CI to build the app in the PR workflow.

[tohuynh]

cc @JacksonMaxfield

[evamaxfield]

I agree we should centralize on tooling. I think @hawkticehurst has opinions on this more than I do. To my knowledge snowpack does better treeshaking or something? I really don't know enough about JS stuff to have a say in this but agree with the idea in general.

[hawkticehurst]

Oh interesting, could've sworn I aligned these months ago. But completely agree on making them the same.

My vote is for using Snowpack versus react-scripts.

With that said, if we're doing this work, I would potentially encourage we actually use Vite instead of snowpack. It has a very similar setup to snowpack, but it has much better support for various things like built-in TypeScript support, CSS preprocessor support, uses Rollup to bundle code (which is sooooo much easier than webpack), and finally uses esbuild under the hood as well which is ridiculously fast.

Vite also has a react-ts template that either be referenced here or be generated via the vite CLI.

This would obviously be more of an investment in time, but based on how much we've struggled with react-scripts/webpack I think it could be a really fruitful investment.

[evamaxfield]

You may have aligned the two months ago, but then I may have unaligned them when I was trying to get the cookiecutter to even deploy properly. Iirc, I just couldnt get the cookiecutter-ed repos (the actual instances) to build properly with snowpack.

[hawkticehurst]

Ahhh yeah that would make sense.

The long short is snowpack does bundling differently than most other web tooling today, which is something I hadn't fully realized back when I used it in CDP. It's a really cool future-proof way of building/bundling code but doesn't work super easily out of the box at times.

That's also why I would recommend vite because it's going to bundle code in a way that should just work and should be much easier to configure than using webpack/react-scripts.

[tohuynh]

The command to build and bundle cdp-frontend as an npm package should be done by this one tooling library too. Looks like this can't be done with react-scripts?

Brief glancing over the documentation for vite, it looks fine to me. And it supports building both the app and library.

[hawkticehurst]

Oh yeah, honestly don't if react-scripts can handle building for both app/library––but certainly vite can and I agree that aligning on one tool for building/packaging would be preferred.