UI devel

Archives AWX Project
1

Hello all,

I am struggling on how to work on web UI ui-docker without having to rebuild the ui-devel (of course it takes like 5 or 10 min) for every change.

Is there a way to work on the front-end and check how it behaves without 5 or 10 min between changes?

Thanks in advance.

2

The Docker-based development environment actually has tooling to run a webpack dev server that notices frontend file changes and auto-reloads. Additional, it proxies non-static requests through the underlying python-based API. Assuming you have the 6.x LTS version of Node and NPM, you can run make ui-docker

~ make ui-docker
…

webpack-dev-server --config build/webpack.watch.js --progress --https

[HPM] Proxy created: (pathname, req) => !(pathname === ‘/api/login/’ && req.method === ‘POST’) → https://localhost:8043
[HPM] Proxy created: /api/login/ → https://localhost:8043
[HPM] Proxy created: /websocket → https://localhost:8043
[HPM] Proxy created: /network_ui → https://localhost:8043

Project is running at https://127.0.0.1:3000/

3

After changes, the ui-docker is aware of changes and reload the webservice as expected, but the front-end page is blank once it finishes (see attached picture).
It goes back to normal after I run again ‘make ui-devel’.

`
$ make ui-docker
…
npm --prefix awx/ui run ui-docker –

awx@1.0.0 ui-docker /opt/awx/awx/ui
npm run watch;

awx@1.0.0 watch /opt/awx/awx/ui
webpack-dev-server --config build/webpack.watch.js --progress

[HPM] Proxy created: (pathname, req) => !(pathname === ‘/api/login/’ && req.method === ‘POST’) → https://localhost:8043
[HPM] Proxy created: /api/login/ → https://localhost:8043
[HPM] Proxy created: /websocket → https://localhost:8043
[HPM] Proxy created: /network_ui → https://localhost:8043

Project is running at http://127.0.0.1:3000/
webpack output is served from /static/
Content not from webpack is served from /opt/awx/awx/ui/static
[hard-source:core] HardSourceWebpackPlugin is writing to a new confighash path for the first time: /opt/awx/awx/ui/static/node_modules/.cache/hard-source/543866c09a020d7d4cd1127d42a24616e988ce628932a6b6feca32e6a171c75c
1783 modules
webpack: Compiled successfully.
webpack: Compiling…
1782 modules
webpack: Compiled successfully.
webpack: Compiling…
1782 modules
webpack: Compiled successfully.
`

4

Are you visiting port 3000 in your browser? Have you tried in a private window to ensure no caching is taking affect?