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

**URL:** <https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560>\
**Category:** AWX Project\
**Tags:** awx\
**Created:** [June 13, 2019, 12:46pm UTC](https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560 "2019-06-13T12:46:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Narayan\_G\_Maharjan](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@Narayan\_G\_Maharjan](https://forum.ansible.com/u/Narayan_G_Maharjan)\
**Post date:** [June 13, 2019, 12:46pm UTC](https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560/1 "2019-06-13T12:46:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mabashia](https://avatars.discourse-cdn.com/v4/letter/m/e9a140/32.png) [@mabashia](https://forum.ansible.com/u/mabashia)\
**Post date:** [June 13, 2019, 1:44pm UTC](https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560/2 "2019-06-13T13:44:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Narayan\_G\_Maharjan](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@Narayan\_G\_Maharjan](https://forum.ansible.com/u/Narayan_G_Maharjan)\
**Post date:** [June 13, 2019, 2:17pm UTC](https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560/3 "2019-06-13T14:17:29Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![mabashia](https://avatars.discourse-cdn.com/v4/letter/m/e9a140/32.png) [@mabashia](https://forum.ansible.com/u/mabashia)\
**Post date:** [June 14, 2019, 1:35pm UTC](https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560/4 "2019-06-14T13:35:21Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![Narayan\_G\_Maharjan](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@Narayan\_G\_Maharjan](https://forum.ansible.com/u/Narayan_G_Maharjan)\
**Post date:** [June 14, 2019, 4:15pm UTC](https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560/5 "2019-06-14T16:15:31Z")

</div>

I have now changed everything back to and it is running in [https://localhost:3000](https://localhost:3000) with [https://localhost:8043](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” .

---

<div class="post-metadata">

**Author:** ![Narayan\_G\_Maharjan](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@Narayan\_G\_Maharjan](https://forum.ansible.com/u/Narayan_G_Maharjan)\
**Post date:** [June 14, 2019, 4:19pm UTC](https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560/6 "2019-06-14T16:19:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Narayan\_G\_Maharjan](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@Narayan\_G\_Maharjan](https://forum.ansible.com/u/Narayan_G_Maharjan)\
**Post date:** [July 3, 2019, 2:45pm UTC](https://forum.ansible.com/t/problem-in-updating-the-navigation-menus-using-layout-partial-html/30560/7 "2019-07-03T14:45:51Z")

</div>

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