Galaxy UI Development

Hot Reload

Hot reload is a feature in many web development frameworks where one can edit UI related code and have the changes automatically applied after a short amount of time or upon refreshing the page. Rebuilding the client is not necessary, and thus this feature saves a lot of time when developing client side code.

To enable this feature in Galaxy (which is a Vue app), follow these steps:

1. Make sure Galaxy is installed via pulling the source code. See https://github.com/galaxyproject/galaxy
2. Make sure that both Node and yarn are installed on the system that will run Galaxy. See https://nodejs.org/en/ and https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable
3. Navigate to the root directory of Galaxy and run ./run.sh. This is the standard way to start Galaxy. Wait for Galaxy to build and start. Keep the application running. This can take several minutes or longer if it is the first time building Galaxy. If you have built Galaxy before, it shouldn't be too long. When you see [INFO] Listening at: http://127.0.0.1:8080 in your terminal and you can navigate to localhost:8080 in your browser and see Galaxy, then you are ready for the next step.
4. In a separate terminal, again navigate to the root directory of Galaxy, and then run make client-dev-server. This will start another instance of the Galaxy client, but this time at localhost:8081. Again, it will take a couple of minutes to start up, but once you can navigate to localhost:8081 and see Galaxy then you're good.
5. Using localhost:8081, continue development and you should see your changes appearing after several seconds of saving whatever Vue file you edited.