Testing GUI Changes Live

General Discussions
, ,
1

Hi there,
I’m pretty new to front-end development, and would like to contribute to the mender gui. As of now, I’ve been making docker files every time I want to test my changes, but it takes a long time to compile, and then if anything fails, it’s another few minutes fixing and rebuilding. I noticed that gulp is mentioned in the readme, but when running gulp build or gulp watch there’s no indication of a localhost port to access/see the gui on. Is there a standard way to develop quickly for this project? A step-by-step would be greatly appreciated.

Liz

1 Like
2

Thank you, this is sure an interesting question. I’m not on the frontend myself, although I have also been playing with the idea of contributing something here.

@mzedel how would I go about this? :slight_smile:

3

Hi @lizziemac & @oleorhagen,
thanks to both of you for your interest in working on the gui side of things!
the gulp command is intended to build however the content is served from within the regular container running in your local mender setup.
To set this up I usually create a docker-compose.override.yml in the folder you have cloned the integration repo into (just to isolate the changes made to the running environment in a single file) with the following content:

version: '2.1'
services:
    mender-gui:
        volumes:
            - ../<path-to-clone-of-the-gui-repo>/dist:/var/www/mender-gui/dist

and then start the demo environment with this file like this: ./demo -f docker-compose.override.yml up (or add this in the demo script) from the integration clone folder. The content should be accessible under https://localhost/ just as without any modifications.
Now with this running, change into your gui folder (make sure to once run npm install to get all the dependencies installed) and then you can run the gulp commands or go straight to the npm scripts (it uses webpack internally and gulp is now just a wrapper for legacy purposes). So you can run either npm run build (for one time builds), npm run watch (for development), npm run lint (the linting rules can be found in the .eslintrc file in the repo) or npm run test (to run the jest tests).
When running npm run watch the incremental build takes around 10 seconds on my machine for any changes made, but then they should show up on page refresh (at some point I’ll wire up the hot-reloading, but for now this should be good enough :man_shrugging:).
I hope this clarified things, please let me know if you have any additional questions!

1 Like
4

Thank you! This worked like a charm for me.

1 Like