storybook: add build job

[VIKTORVAV99]

Issue

If we want to use Storybook effectively we need it in the CI/CD pipeline.

Closes: AVO-349

Description

This adds a build job for storybook which upload a build artefact. I will create a separate CI job that uploads this artefact to Cloudflare.

It also creates a new vite config for storybook so we don't build it with sentry and PWA stuff it was not designed to handle.

Double check

• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[madsnedergaard]

I like the idea, but wouldn't it be easier to do it with Earthly similar to how we deploy the app?

[VIKTORVAV99]

I like the idea, but wouldn't it be easier to do it with Earthly similar to how we deploy the app?

I wanted to keep as much of the "contrib" stuff in GitHub as possible if that makes sense. And we are already deploying the staging and previews like this. The only difference is that this adds a intermediate build job so we can check that the build is actually passing (we have cypress for that on the other web stuff) and then reusing the same artefacts for deployment (next steps) or you can download them and open them in vite preview for example.

[madsnedergaard]

I like the idea, but wouldn't it be easier to do it with Earthly similar to how we deploy the app?

I wanted to keep as much of the "contrib" stuff in GitHub as possible if that makes sense. And we are already deploying the staging and previews like this. The only difference is that this adds a intermediate build job so we can check that the build is actually passing (we have cypress for that on the other web stuff) and then reusing the same artefacts for deployment (next steps) or you can download them and open them in vite preview for example.

Fair, that makes sense (keeping in in GH Actions).

Is it really worth running the job on every single PR instead of just on merges to master, where we would deploy it on a real URL somewhere (like ui.electricitymaps.com?)?
I struggle seeing the usability of having a built version available on every single PR, and it adds up on CI time and build minutes - but happy to hear your thoughts on this :)

[VIKTORVAV99]

I like the idea, but wouldn't it be easier to do it with Earthly similar to how we deploy the app?

I wanted to keep as much of the "contrib" stuff in GitHub as possible if that makes sense. And we are already deploying the staging and previews like this. The only difference is that this adds a intermediate build job so we can check that the build is actually passing (we have cypress for that on the other web stuff) and then reusing the same artefacts for deployment (next steps) or you can download them and open them in vite preview for example.

Fair, that makes sense (keeping in in GH Actions).

Is it really worth running the job on every single PR instead of just on merges to master, where we would deploy it on a real URL somewhere (like ui.electricitymaps.com?)? I struggle seeing the usability of having a built version available on every single PR, and it adds up on CI time and build minutes - but happy to hear your thoughts on this :)

Running it on each PR means we can get preview builds as well, at least when someone in the Emaps org opens a PR which could be nice when reviewing PRs and just checking general changes.

But if we just want to publish on master we can do that, I would however still want to build the project so we ensure we don't do breaking changes to the storybook config in some way.

As for the URL I was thinking either storybook.electricitymaps.com or design.electricitymaps.com but ui could work as well.

[madsnedergaard]

I like the idea, but wouldn't it be easier to do it with Earthly similar to how we deploy the app?

I wanted to keep as much of the "contrib" stuff in GitHub as possible if that makes sense. And we are already deploying the staging and previews like this. The only difference is that this adds a intermediate build job so we can check that the build is actually passing (we have cypress for that on the other web stuff) and then reusing the same artefacts for deployment (next steps) or you can download them and open them in vite preview for example.

Fair, that makes sense (keeping in in GH Actions).
Is it really worth running the job on every single PR instead of just on merges to master, where we would deploy it on a real URL somewhere (like ui.electricitymaps.com?)? I struggle seeing the usability of having a built version available on every single PR, and it adds up on CI time and build minutes - but happy to hear your thoughts on this :)

Running it on each PR means we can get preview builds as well, at least when someone in the Emaps org opens a PR which could be nice when reviewing PRs and just checking general changes.

But if we just want to publish on master we can do that, I would however still want to build the project so we ensure we don't do breaking changes to the storybook config in some way.

Okay fair enough, we can always reconsider if this becomes a problem :)

As for the URL I was thinking either storybook.electricitymaps.com or design.electricitymaps.com but ui could work as well.

Could also work, I guess "design.electricitymaps.com" could work nicely for using it as a wider brand guidelines, where we also keep logos, colors, etc. clearly defined :)

[madsnedergaard]

LGTM! :)