The only solution known to me is the storybook

gotcha, but what i'm thinking of is to make actual code changes in the frontend packages immediately reflect in the locally deployed app. This will immensely help with testing time.

Current workflow:

1. make a change in the frontend code
2. rebuild all images and redeploy via make TEST start-FULL-REBUILD
3. run the test via make e2e-run

If we could replace step 2 with hot reloading, the time it takes to test the changed code will decrease.

True. I guess one option is to edit Docker compose configure to mount volume of the source code and enable reload/dev option for ReactJs on code change in the directory.

I think make will COPY source code into Docker container to serve, so if we mount the directory of source code into the same path in container (override the directory in container with directory in the host) the source code from the host will be loaded instead of the code used to build, so it can detect code change of the source code you are editing outside the container.

I did not look into the environment and tools so not sure if this is supported, but to me it is the option that most likely will work, as I used to handle this kind of situation in such way.

Sorry I assumed everyone knows how to mount volume. Mounting volume is when we create the docker instance from the docker image, for single docker docker -v /home/user/src:/app/ui/src and for docker compose it is defined in the YAML file.

I know you may have found a better way to do it. But I think it will be better if I add this clue for anyone found this doc one day : https://docs.docker.com/engine/storage/volumes/

hey i appreciate the pointers! but just fyi, that's how i've already implemented in the docker-compose file :) :

And i've verified the mounted volume by inspecting it.