Problem in updating the navigation menus using layout.partial.html

Hi ,

I have been trying to edit some menus and custom page inside AWX . I do have average knowledge of Angular 1.x and webpack. I am able to update the content of existing dashboard, home page contents , after getting into the deep code i see all of navigation is done from by using layout.partial.html and its directive. I am using this commandline for running UI in my localhost.

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

I would like to know what did I miss ? Is it because of HardSourceWebpackPlugin ? Please you please help me how to figure out why I am not seeing navigation html menus being updated .

Thanks in advance

That command is quite similar to what we use in development with one exception - we pass the https flag

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

`

I want to make sure I understand the behavior you’re seeing. You fire up the dev server and make changes to the dashboard pages without a problem. Does the page reload automatically with your changes applied? When you make changes to layout.partial.html are you sure that there aren’t any linting errors in the console? That would prevent compilation and you wouldn’t see changes in the browser. An alternative to the “live reload” would be to use the following command:

make ui-devel

from the root of the awx directory. This will build a static bundle and needs to be executed after each change (along with a browser refresh). Note that you’d access the UI on port 8043 if you do go down that path. Are there any errors in the browser’s console that may be an indicator of something going wrong?

I think i have just replied but did not displayed in the forum. Let me reply again.:

I have a docker AWX Tower setup running in 8080 port. Right now for developing the UI part of AWX tower I am using 3000 port after running this command.
`
make ui-docker

`

When I run it in browser with 8080. It shows the AWX default logo however in the 3000 it shows me angry cartoon logo. I do not get auto update on browser localhost:3000 and I had to manually refresh after I get success message in commandline where it running make ui-docker. I did not think https is a mandatory so right now I am running everything in http . For the reference of my webpack.watch.js I am pasting it in here just so that it might help to figure out the issue.

`
Enter code hconst path = require(‘path’);

const _ = require(‘lodash’);
const webpack = require(‘webpack’);
const merge = require(‘webpack-merge’);
const nodeObjectHash = require(‘node-object-hash’);
const HardSourceWebpackPlugin = require(‘hard-source-webpack-plugin’);
const HtmlWebpackHarddiskPlugin = require(‘html-webpack-harddisk-plugin’);

const TARGET_PORT = _.get(process.env, ‘npm_package_config_django_port’, 8080);
const TARGET_HOST = _.get(process.env, ‘npm_package_config_django_host’, ‘http://localhost’);
const TARGET = http://${TARGET_HOST}:${TARGET_PORT};
const OUTPUT = ‘js/[name].js’;

const development = require(‘./webpack.development’);

const watch = {
cache: true,
devtool: ‘cheap-source-map’,
output: {
filename: OUTPUT
},
module: {
rules: [
{
test: /.js$/,
enforce: ‘pre’,
exclude: /node_modules/,
loader: ‘eslint-loader’
}
]
},
plugins: [
new HtmlWebpackHarddiskPlugin(),
new HardSourceWebpackPlugin({
cacheDirectory: ‘node_modules/.cache/hard-source/[confighash]’,
recordsPath: ‘node_modules/.cache/hard-source/[confighash]/records.json’,
configHash: config => nodeObjectHash({ sort: false }).hash(config),
environmentHash: {
root: process.cwd(),
directories: [‘node_modules’],
files: [‘package.json’]
}
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
hot: true,
inline: true,
contentBase: path.resolve(__dirname, ‘…’, ‘static’),
stats: ‘minimal’,
publicPath: ‘/static/’,
host: ‘0.0.0.0’,
disableHostCheck:true,
https: false,
port: 3000,
clientLogLevel: ‘none’,
watchContentBase: true,
proxy: [{
context: (pathname, req) => !(pathname === ‘/api/login/’ && req.method === ‘POST’),
target: TARGET,
secure: false,
ws: false,
bypass: req => req.originalUrl.includes(‘hot-update.json’)
},
{
context: ‘/api/login/’,
target: TARGET,
secure: false,
ws: false,
headers: {
Host: localhost:${TARGET_PORT},
Origin: TARGET,
Referer: ${TARGET}/
}
},
{
context: ‘/websocket’,
target: TARGET,
secure: false,
ws: true
}]
}
};

module.exports = merge(development, watch);

`

Thanks in advance

If you’ve made modifications to the webpack config then I’m not going to be able to help you debug that. Without any modifications you should be able to run make ui-docker and get live reloading when visiting the UI on port 3000: https://127.0.0.1:3000

I have now changed everything back to and it is running in https://localhost:3000 with https://localhost:8043 (server) . I can see both of them running fine but still why my update is not live reloading and my changes of layout.partial.html is not showing the updates. For making this happen I had to add SSL in the server with 8043 port exposed in docker and for the UI i did not change anything I just run “make ui-docker” .

Also I would like to mention that I am using “devel” branch

I found the issue was with the inventory.yml where i should have just commented dockerhub_base and it worked locally.