Aurelia with VS2015: Modifications to view not visible to the client - aurelia

I'm using Aurelia with Visual Studio 2015. I started with the project as an empty ASP.NET 4.6 project. But when I change my view, I don't the see the new html elements on the browser side. It seems like the browser is caching it and not getting the new view from my server.
From the F12 tools window, I see no HTTP traffic going to the server except the fetch to get data from the Web Api service.
What server configuration is necessary to make my code updates visible on the browser?

I disable caching ... In Chrome, F12 and then click the Network tab. Check the "Disable cache" checkbox. Ctrl-F5 to clear and refresh. After that, the network tab shows request going out with HTTP Status 200 response and I see the changes. [BUT WHAT IF: I don't want to use the developer tools to control the caching. I just want the module loader to always get the file from the server?]

By default, IIS allows browsers to cache static content such as html, and image files. To avoid that, you need to disable static content cache in the web config file as follows:
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache"/>
</staticContent>
</system.webServer>
</configuration>
UPDATE:
You also need to clear the browser cache because the html files are already cached and therefore the browser will not request them to the server. Once the browser cache is cleared and the configuration in place, you will not experience the problem anymore.

Related

How to clean out Blazor WebAssembly DLLs from browser?

I ran two sample Blazor WebAssembly apps accidentally on same port at https://localhost:44381, then things are messed up. One of the apps is erroring out because it tried and failed to load DLLs from the other sample app. I tried going to browser's devtool Application > Clear storage, but no help. How do I totally clean out the DLLs of a Blazor WebAssembly app from browser so that I could start fresh again?
Blazor WASM applications from version 3.1 download a file blazor.boot.json which lists the assemblies along with a sha256 hash to indicate the version. These assemblies are now downloaded to the browser's Application Cache Storage (see example below).
Application -> Clear storage should work - check that Application cache is selected on the Application -> Clear storage page:
Using the Empty Cache and Hard Reload will not clear out this cache, but will reload the blazor.boot.json file, and if the cached files have changed (the hash is different) then they should be reloaded.
You can also clear out individual assemblies from the Cache Storage view - right-click and you can delete them. When you refresh the application, Blazor will download the latest version.
Chrome and the new Edge press F12. This opens the developer tools. Whilst this is open right click the refresh page Icon on the browser. On that menu choose empty cache and hard refresh. This is the only way to clear everything including icons and PWA settings.
Just press Ctrl+F5 it cleans cache and gets files again.
In your .csproj (for your wasm site) file you can force the app to download resources each time it's requested. Bit of a performance hit for the first load, but gets you over the current problem.
<PropertyGroup>
<BlazorCacheBootResources>false</BlazorCacheBootResources>
</PropertyGroup>
There are some caveats - see documentation here: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#disable-integrity-checking-for-non-pwa-apps-1

Uploaded file is not visible in browser unless I force no cache browser reload

I am facing weird issue with file uploads. When I upload a new file to publicly visible folder, I can see it instantly in anonymous mode. But if i try to access it in non-anonymous mode, the server responds with 404 unless I do hard refresh (ie ctrl + F5 for Mozzila).
I have already disabled cache control headers for that folder in apache, but that did not seem to resolve the issue. It seems to me that the apache is storing information that "there is actually no file at requested url" and serves it to user unless user clears cache even if the file is uploaded at that location. Anyone ran into similar issue in the past?
By default, most browsers cache images, styles and scripts automatically. The easiest way to bypass this for development environments is to set the caching headers detailed here
Another common way to bypass caching is to set a random query parameter (usually ?v=<random value here>).
Chromium based browsers also have a disable cache option in the dev tools

Update browser automatically with cshtml file changes without doing a browser refresh

When editing a cshtml file I want my browser to automatically update after making changes to it but doing so without doing a browser refresh.
I 'think' I remember reading that this is possible in Visual Studio 2013 with the new Web Essentials and browser link capabilities. Is this possible, if so how do I enable it?

Why are my Script Bundles only working on Server

I have deployed my app to my IIS server. The javascript/css seem to work when I browse the webpage from the IIS server (although some of the css seems to not be loading as well). However, when I go to another machine and view the webpage from a client, none of the Javascript seems to be enabled. The links to the scripts are there, and when I type their path into the browser, I am able to retrieve the file (so it's not a permissions issue or a path issue). Yes the browser I am viewing the page from has javascript enabled (it's my dev machine where everything works if I'm working from visual studio).
Can anyone help me figure out what is happening here? Everything works fine in my dev machine.
Edit
Ok I have tried everything I can find on the interwebs. I have tried adding the 'bundle' module, removing then adding (as below), I have tried with and without 'runAllManagedModulesForAllRequests', I have tried enableing and disabling the
<compilation debug="false" targetFramework="4.5" />
Nothing seems to work.
<modules runAllManagedModulesForAllRequests="true">
<remove name="UrlRoutingModule-4.0" />
<add name="UrlRoutingModule-4.0" type="System.Web.Routing.UrlRoutingModule" preCondition="" />
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
<!-- any other modules you want to run in MVC e.g. FormsAuthentication, Roles etc. -->
</modules>
I just don't understand why IIS7 would be doing something different when you browse the website locally on the server and another thing when you browse the site on different machine?
Edit 2
Even more baffling. I figured there might be something wrong with bundling (some assembly not loaded correctly who knows) so to test the theory, I commented out all the bundling code on my layout and replaced it with hard coded links to the styles/javascript. Again, it works in development, it works when previewing on the server, but when you go to a client machine, none of the javascript seems to work!!! I've installed it on two different IIS servers now... still same problem!
Edit 3
Unbelievable. It looks like the problem is... drum roll. IE10. I am using integrated authentication so I was only using IE. Until I realised that chrome can prompt/pass credentials as well. So I opened the site from Chrome and no problem! I compared the html from my local version on my dev machine to the html coming from the server, and other than the fact that the URLs have an extra element in the path (the site is deployed to a virtual directory) the html is identical. So for whatever reason, IE has decided that it will not run javascript from my IIS server, but it will from every other website on the internet. I even used fiddler to double check that all of the css/javascript was being fetched and received (they are, even checked the temporary files folder after a clean sweep to see if the css/js was downloaded). So, as usual, IE is a piece of crap causing nothing but headache and misery. Now to figure out how to fix this (my organisation is 80% IE).
So for anyone out there who might run into the same issue and has to work with IE I solved the problem by adding this to my _layout.cshtml:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
What this does is instructs IE to use the latest available rendering engine to process the html (in other words don't try to be smart and guess what my html is built for). So it essentially tells the versions of IE that have 'compatibility mode' to not use it.
For me this works fine because our organization is small and we are usually within one version of the latest release of IE. If the latest version causes issues, I can easy fix and deploy with no harm done. However, this IS NOT optimal for a general purpose website or organization with high numbers of users on a variety of IE browsers.
I came across this problem too.
I found was that Internet Explorer was set to "high" when browsing the internet when using our corporate network. Once I added my site to the trusted sites zone, everything worked.
You can check if your site in the Trusted Sites zone, but going to Internet Options -> Security -> Sites

Does IntelliJ have an internal web server to serve static content of a web application?

Right now, the directory of my module is defined as an IIS virtual directory and IIS serves the files.
I was wondering whether IntelliJ has an internal web server, which can serve the files, without the need for any third party. Eclipse does.
UPDATE: built-in web server is available in the recent IntelliJ IDEA versions (starting from 13). You can find more details in the blog (yes, this feature first appeared in WebStorm).
IntelliJ IDEA has no this feature, you need to install and use any third-party web server that can serve the content from the project folders.
A built-in HTTP preview server will be part of Intellij IDEA 13 and is already available in the EAP: http://youtrack.jetbrains.com/issue/WEB-7148
"All existing actions — preview in browser (pop-up over html file or menu action or
shortcut), open in browser and create/debug html file action now open file on built-in web
server
http://localhost:63342/<project name>/<file path relative to source or content root>"
In other words, right-click on an HTML page and select "Debug" or "Open in browser", and IDEA 13+ will serve up that page via port 63342.
Here's another super simple option, install Python: http://www.python.org/getit/
Then open a shell prompt, navigate to your root web folder (e.g. public) and run python -m SimpleHTTPServer - This starts an HTTP Service on port 8000.
Further reading should you need it: http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python
I've got mine running on Windows 7 but the above article still applies.
Another option is is create a PHP project that, starting with v 5.4.0 of PHP includes a built in web server. This page explains it all ...
http://www.jetbrains.com/idea/webhelp/php-built-in-web-server.html
IntelliJ IDEA has a built-in web server that can be used to preview and debug your application. Just watch this YouTube video or follow the steps below.
Option 1
You need to add new 'JavaScript Debug' configuration:
Click Add Configuration... or Edit Configurations... in the Navigation bar
Click button in the toolbar or press Alt + Insert to create a new configuration
Select JavaScript Debug under the Templates node in the tree view of run configurations
Fill in Name, URL, Browser and click [OK] to save the configuration
Use http://localhost:63342/YOUR-PROJECT-NAME/index.html for URL
Now you can run the configuration:
Click run or debug button in the Navigation bar (or use Shift + F10 / Shift + F9 hotkeys).
Option 2
Running web page in browser without creating a configuration. Refer to the related IntelliJ IDEA Help article.
In the editor, open the HTML file. This HTML file does not necessarily have to be the one that implements the starting page of the application.
Do one of the following:
Choose View | Open in Browser on the main menu or press Alt+F2. Then select the desired browser from the pop-up menu.
Hover your mouse pointer over the code to show the browser icons bar: . Click the icon that indicates the desired browser.
Result
Google Chrome browser with a demo web page served by the Intelij IDEA's built-in webserver:
One simple way is to create a NodeJS / Express project in IntelliJ that is your web server. You can then use it to serve your static web pages and any other web content. The NodeJS web server is very small and runs fast - noticeably faster than IIS and Apache. Best of all you can just hit the Run button in IntelliJ or WebStorm to start it up.
By default, a NodeJS / Express project includes a public/ directory that you can use to contain your static pages that you can then view from http://localhost:3000/
This explains the steps required to enable NodeJS in IntelliJ and includes links to other Node resources:
http://www.jetbrains.com/idea/webhelp/node-js.html
If you feel the need, you can reconfigure your NodeJS server using server side Javscript code. You can add SSL support or almost any other server side features you care to dream up. Just add NodeJS modules using the npm (Node Package Manager) command line tool included with the install. NPM Registry https://npmjs.org/ indexes all the available modules.
You can configure IntelliJ to use a lot of different application containers, but each of them must be downloaded and installed separately. I currently have mine configured to serve via jetty, like eclipse, and also tomcat, tc-server, jboss, and node.js. It's pretty easy to set up.