volyfequickdev

At Voly, we use Storybook as the main tool for FE component development.

But this becomes a tedious process when it comes to debugging, particularly scenarios where it’s not possible to replicate live data on storybook’s local server.

This will subsequently require FE devs to push a change to a work branch and run a deployment pipeline (usually takes 3 - 10 minutes) just for testing purposes.

And my extension was born to fix all that.

What I learned from this project is:

• How to create a VSCode extension for the first time.
• How to combine Vite watch builder with the extension to create almost instant rebuild of files that reflect on the targeted site UI.
• Quite ashame to admit this slow learning, but also now, know more about webpack build and what the external field is used for.
• How to set a timeout to abort API calls for better user experience, particularly for non-dev, or backend individuals who don't use the extension at all.
• To be aware of cross-platform differences in terminal command lines and what library to use to ensure commands are platform-agnostic.
• How to use tunnels to expose local development environment for quick collaborations and tests on apps that prevent access to localhost like BrowserStacks.