We Keep Coding

How to get Azure web app service to enable javascript file change

I've made a javascript file change on my Azure app service web app. I can see the change via FTP download and via App Service Editor. However, when I log into the application, the desired change in behavior of the code, which should be very obvious, has not changed.
If I F12 (in Chrome) and look at the Source, the change has not been made.
I did a "hard reload" of cache from within DevTools (F12). Still no change.
Is there something else I need to do to implement this change in the application, i.e. stop and restart the application?
UPDATE:
Light bulb goes on: the JS is running from mini-fied bundles, so changing one separate JS file won't make a difference. Would be nice to know about whether the app WOULD have accepted a change without restart, however, not critical for solving my problem.

You can append a version parameter to avoid client-side caching. Try adding a caching buster to the URL for requesting the JS file. For example. "/app.js/?v=v1". The value of the version can be changed every time you deploy new changes.

How do I inspect an Electron app's DOM from a script?

I have an Electron app running on my computer (Slack). I would like to run some JavaScript that reads HTML DOM of this app. Is this possible? If so, is there a "getting started" somewhere?
In my mind, since Electron uses Node.js to host HTML / JavaScript, I can possibly read the DOM. At the same time, I could see this not being allowed because it could be a security risk. I'm ok with the security risk since it's running on my machine. So, I assume there would be a UAC prompt. Still, I'm just trying to figure out how to read the DOM from an external script if possible.
Thank you

From my understanding you want to inspect or manipulate some HTML of a electron app which is installed?
This is how I figured out how to access (on Mac OS) using Slack as an example:
Go to your Applications Folder -> Slack -> Right click "Show Package Contents"
Go To "Contents->Resources -> app.asar.unpacked"
You can check out how for example parts of the slack app work.
I tried this also with GChat app and they have an app folder. Technically speaking, you could add a script or something into the index.html / index.jade (slack) and hijack into the main.js or index.js scripts.
For example I was able to search for BrowserWindow Object inside the Chat App of Google Chat and add .webContents.openDevTools(); easily.
Yet any solution involves manual work.
For example in the main.js of of GChat I beautified the code, I searched for the Electron method buildFromTemplate and found the specific function where the View Menu is created. I simply added the following to that
{
role: "toggledevtools",
label: "Toogle Dev Tools"
}
And at the end I was able to easily toogle devtools (seen in the screenshot)

If you are thinking of accessing DOM through console (dev tools) like in a browser, then it's something you cannot do. Because dev tools are available only in development environment, once you build it, you cannot access it.
So running a script may require the electron app to include the script in the source code :
<script src="your-script.js"></script>
So if they included your script in their app, then you could change the content of the script to achieve what you are looking for.

You can add your script into the page (before it loads) and have it there to interact with any page you open in electron.
The easiest way to do that is using preload paramater of new window.
Bear in mind, that you can even make connection with your nodejs script so there is really nice way of communicating with opened pages and your own script in node/electron.
More here: https://electronjs.org/docs/api/browser-window
preload String (optional) - Specifies a script that will be loaded before other scripts run in the page. This script will always have access to node APIs no matter whether node integration is turned on or off. The value should be the absolute file path to the script. When node integration is turned off, the preload script can reintroduce Node global symbols back to the global scope. See example here.

Cache busting in a Offline First Web Application

We are currently using Webpack with the HtmlWebpackPlugin to generate our javascript builds for our webpage.
new HtmlPlugin({
template: 'www/index-template.html', //source path - relative to project root
filename: 'index.html', //output path - relative to outpath above
hash: true,
cache: true //only emit new bundle if changed
}),
This causes a hash to be added to the query string of the bundled javascript file.
<script type="text/javascript" src="/build/vendor.min.js?4aacccd01b71c61e598c"></script><script type="text/javascript" src="/build/client.min.js?4aacccd01b71c61e598c"></script>
When using any standard desktop or mobile browser, new builds are cache busted properly and the new version of the site is loaded without any effort from the user. However, we also have a chrome web app implementation where we call:
chrome.exe --app=http://localhost:65000 --disable-extensions
In this application, for some reason the hash on the end of the javascript build doesn't bust the cache. We have to manually right click somewhere on the page, then click reload (or press F5). For some reason the cache isn't busted in the web application.
I was thinking that possibly it is caching the index.html file maybe? That may cause the app to never receive the updated hash on the build. I'm not sure how to solve that issue though if that is the case.
I have also noticed that if our localhost server is down, the page still loads as if the server were running. This indicates to me some kind of offline cache. I checked the manifest.json parameters and can't find anything to force a reload.
I have also tried these chrome command line switches which did not help either: --disk-cache-size=0, --aggressive-cache-discard, --disable-offline-auto-reload.
Another caveat is that we need to retain the localStorage data and their cookies. In a standard browser window, or any browser for that matter it works just fine, but not when it is inside a Chrome web app.

Are you talking "Progressive Web App" with service workers? If so then the html file can (and should) be cached on first download. You need to have some sort of aggressive update process on the client to ensure new files are loaded properly.
Perhaps having an api call that checks some sort of dirty flag on the server could work, and if it comes back true, it should reload the template files. Or something more complex where it gets an array of dirty files from the server so it knows which ones to reload instead of loading everything. Just some ideas.

As your page works without the server running at localhost, I suspect that your app is offline first. This is done exactly through service workers(as pointed out by #Chad H) which are officially supported by Chrome and are experimental in other browsers. So, expect different behavior in other browsers. To bust the cache,
In Production
For a permanent solution, you to find and modify the service worker (SW) code. Deletion of old caches happens only in activate event of SW.
You can also read more about Service worker and ask a question with the updated SW code. Also, check out this resolved issue that faced a problem similar to yours.
For dev setup
You can use the Disable Cache option under Network tab in Chrome DevTools (works only when DevTools is open) or use a more robust chrome extension called Cache Killer.

How can I automatically refresh my site while editing the CSS?

I am working on HTML/CSS/JavaScript from within emacs. My workflow is currently
Make a change -> Alt-Tab to browser -> F5 (refresh) -> Alt Tab to emacs
Do any extensions exist that would auto-refresh the browser on a change? Or, possibly a better idea, when I hit a key combination from within emacs?

I've tried impatient-mode and it worked nicely for what I needed. It also can be extended to do things like, for example, display the contents of a buffer you are editing in an iframe alongside other buffers etc.

Option 1, refresh the browser on interval:
With the addition of a single meta tag into your html document, you can instruct the browser to automatically refresh at a designated interval number of seconds:
<meta http-equiv="refresh" content="3" />
Option 2, firefox plugin to refresh on document change:
A Firefox Add-on, called XRefresh, will monitor your project folder, and, every time it detects a change to the source files, it’ll reload Firefox.
Option 3, refresh the page from Emacs, vim or shell script:
There is a firefox plugin called IMACROS that let you define a script that will remote control firefox from a file on disk. You can create a remote control script, and then program Emacs, vim or shell script to tell firefox to run the remote control script when you are ready, thus refreshing the page. You would need to create a keyboard hook to kickoff the script on save.

I use Yeoman, which help you scaffold web apps, which uses Grunt and the command
$grunt server
It is a simple setup that enables "livereload". I then set up my localhost or rather IP:9000 which enables live reload of any device in my local network upon file save of all watched files (scss, js, coffee, html) etc. So you can see the site change upon save not only on your desktop, but your tablet, mobile devices, cross browser, smart tv etc..
It also runs compass, unit tests, uglifies & concatenates, does the dishes, walks the dog you name it. Then "$ grunt build" creates complete distributions to deploy.
It's worth a look, it's a bit of a setup, I had a few hurdles, but it's amazing what you get back.

javascript not working on localhost

Ok so I'm lost here, frustrated and pulling my hair and out. Plus probably about to be fired or take a pay cut.
I moved Files from a development server to my local machine. The files are consistent (used diff tool), all the dependencies are there. It works for the most part. The problem is that the some of the javascript (not all) is just not working. We're using jquery and a lot of plugins for it. I've checked with the web developer plugin in firefox and all the js files are loading. I cleared the cache in both firefox and chrome multiple times to no avail. The development server is a windows server running wamp. My local machine is running ubuntu. Somebody tell me what I missed.

Download firebug as a Firefox extension and view the http request and responses.
Easiest may be from within the 'net' tab to determine if your script is making a request.
Very likely that it is a source domain issue. There are no work-around for this issue. The ajax request and the source data must be on the same domain.

It may have something to do with JavaScript's security limitations. (In certain circumstances) You can only operate on URLs or pages from the current domain, which most likely changed when you moved the files off the other server. More here.

Are you running the files via a webserver, or just opening the files directly? If it's the latter, you'll want to set up a server on your local machine for local testing, and serve the files using it. Otherwise, you'll very likely run into the domain restrictions others have mentioned above.

You may need to host the site using a local server. VS IDE has an add-on called live server. You need to set up a workspace in order for it to work. The port used on my machine was 5500.
You need to make sure any dependencies for javascript are running on your server or the javascript will not be executed. These dependencies are listed in the json file.
ex. If you require express, you need to be running node or the javascript won't execute in your web browser.
In the terminal:
node app.js
Any dependencies that are not installed and running on the server will not execute.

Are you accessing the html web pages through the webserver and not simply double clicking the file to open it?
Also if you have WebDeveloper toolbar installed the click "Disable", "Disable Javascript" and make sure "All Javascript" isn't ticked.