Nothing happens when using method history.replaceState - azure

I use azure app services for my nuxt application but when i use history.replaceState it doesnt replace the url. Running it on production on my own pc works fine but when I deploy it to azure it seems like its not doing anything. Maybe I did something wrong in my web.config?
(I also tried using this.$router.replace() which has the same results.)
selectBrand (brand) {
const errors = JSON.parse(JSON.stringify(this.error))
history.replaceState({}, null, window.origin + '/error/'+brand);
this.selectedBrand = brand
this.errorList = this.error.filter(name => name.cBrandname.includes(brand))
}
Here is my web.config
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit https://azure.microsoft.com/en-us/blog/introduction-to-websockets-on-windows-azure-web-sites/ for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="server" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>

Thanks for raising the question and contributing to Stack Overflow.
Reiterating the answer from what Jason has mentioned as this should be solution for the problem you're facing .
Just create a sample Nuxt App and try to publish it again and see if it helps.

Related

Azure Node App (on Windows app service) Failing to Run

As a starting point for an application, I'm trying to get a simple Hello World running on Node in Azure (on a Windows app service). While the goal will be to push from an Azure DevOps pipeline, for now I'm just deploying from VS Code following this guide.
The application runs locally as expected, and the deploy to Azure is successfully moving the expected files (to include node_modules, package.json, app.js, and the various other code files). But the application is somehow failing to run correctly on Azure.
Any request results in a 500 error, whether for the root URL or explicitly for /app.js. (I was testing the latter to see if it just returned the file, but it's a 500 error.) I've enabled as much logging as I can find in Azure, but no more helpful information has surfaced. Just records of HTTP requests with generic 500 responses.
Some research led me to suspect that I need a web.config to tell IIS to use the node application. Following some samples found online, I've ended up with this:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^app.js\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="app.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>
Which makes sense to me. It tells IIS to use iisnode, the entry point file, URL mapping to use that entry point, etc. After re-deploy I'm still getting generic 500 responses.
I'm a bit out of ideas on where else to look or what else to try at this time. I suspect it should be straightforward to just build a Hello World app and deploy it and that I must just be missing something. But what?

NodeJS at Azure : systematic 404 error on resource files

we have a nodeJS webapp at Azure which works fine.
When streaming the server logs, any time I load a page, I get a bunch of 404 errors on all resources (images, css, etc..). Yet the page shows up properly.
Detailed errors show the following:
Requested URL https://[myappname]:80/settings.png
Physical Path D:\home\site\wwwroot\settings.png
Logon Method Anonymous
Logon User Anonymous
The requested URL is clearly wrong, it should be https://[myappname].azurewebsites.net/settings.png, which is the public URL for the given resources, and works fine.
This problem loads huge amounts of logs and makes it impossible to use Web Server logs for now.
thank you!
Edit: unlike this problem, my pages load properly and the resource files are well available.
Solved I have added the following handler to my web.config :
<add name="UrlRoutingModule-4.0" path="*" verb="*" type="System.Web.Routing.UrlRoutingModule" preCondition="" />
I believe you need to configure a ruleset in your web.config for static file content.
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
Node.js applications running on Azure Web Apps are hosted on IIS via IISNode. So, a web.config file is required to config your application on IIS. If you deploy your app to Azure App Service via Continuous Deployment, the web.config file will be automatically generated by Azure. Or you can download the file from here.
I am posting default web.config just for your reference"
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the app.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^app.js\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="app.js"/>
</rule>
</rules>
</rewrite>
<!-- bin directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
To debug your node.js application:
* set the debuggingEnabled option to "true"
* enable web sockets from the portal at https://manage.windowsazure.com/#Workspaces/WebsiteExtension/Website/aarontestnode/configure
* browse to https://aarontestnode.azurewebsites.net/app.js/debug/
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<iisnode watchedFiles="web.config;*.js" debuggingEnabled="false" />
</system.webServer>
</configuration>
Hope it helps.
thanks for your answer.
I have nearly the same web.config, automatically generated. There is just a slight difference in the rule you pointed :
<rule name="StaticContent">
<action type="Rewrite" url="public{PATH_INFO}"/>
</rule>
My server code includes this:
app.use(express.static(path.join(__dirname, 'public')));

Angular app in Azure displays raw js text

I've got an angular app that runs fine locally. I can run http-server and access the page. Now I am trying to move it to run in Azure. When I access the sitename.azurewebsites.net URL all I see is the actual text of my app.js file. Its not rendering as if it were on a nodejs server.
Here is the local directory structure. From the command line I cd to the app folder (app.js is in app\scripts folder) and use http-server to start it up. I see the angular app rendered as expected.
In Azure, I have web.config files that points to app/scripts/app.js file. When I access the sitename.azurewebsites.net URL, instead of the angular app running, I just get the app.js file served up to me as text. Like so:
Not sure what Azure setting is missing to let it know to run this as an Angular app. In the app Service I have an entry under Application Settings for Node:
WEBSITE_NODE_DEFAULT_VERSION 6.9.1
Here is the directory structure in Azure:
Here is the web config:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="app\scripts\app.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="app\scripts\^app.js\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="app\scripts\app.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>
Well there were a few issues here but what I discovered :
the contents of the dist folder are all that was needed - I don't even have the web.config file anymore
the dist did not generate all files. The /scripts/vendor*.js file that was generated was empty. I fixed that by following suggestions here: Grunt build not populate scripts.js with bower_components
Updated the App Service-> Application Settings->Virtual applications and directories to point to site\wwwroot\dist - this probably isn't needed, I copied the dist folder instead of just it's contents. If I put the contents at the wwwroot level I probably would need this change.

node app on azure occasionally redirecting to server.js

I have a Node.js (Express) app that is running on Azure App Service. Every once in a while, when I visit my domain, rather than executing the Node app, I will be taken to https://example.com/server.js. This doesn't happen often, but occasionally we'll have a user report that they can't get to our app and this ends up being the culprit.
To make matters worse, it's very hard, if not impossible, to reproduce. I have had some luck reproducing with a fresh install of a new browser, but not always.
I'm basically using the default web.config with a couple of added lines for HSTS/HTTPS. See below:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false"/>
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add modules="iisnode" name="iisnode" path="server.js" verb="*"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?"/>
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
<!-- Redirect all HTTP to HTTPS -->
<rule name="HTTP to HTTPS redirect" stopProcessing="true">
<match url="(.*)"/>
<conditions>
<add ignoreCase="true" input="{HTTPS}" pattern="off"/>
</conditions>
<action redirectType="Permanent" type="Redirect" url="https://{HTTP_HOST}/{R:1}"/>
</rule>
</rules>
<outboundRules>
<rule enabled="true" name="Add Strict-Transport-Security when HTTPS">
<match pattern=".*" serverVariable="RESPONSE_Strict_Transport_Security"/>
<conditions>
<add ignoreCase="true" input="{HTTPS}" pattern="on"/>
</conditions>
<action type="Rewrite" value="max-age=31536000"/>
</rule>
</outboundRules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough"/>
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>
Any suggestions on why this might be occurring?
I would recommend you install the extension named Redirect HTTP to HTTPS via the Azure portal rather than add a rule manually.

http to https using web.config appends server.js to url

I'm trying get all http traffic to redirect to https using web.config on azure. I'm using node.js stack.
I want the url to remain the same for all requests. Currently, however, it's appending server.js to the end of the route.
The problem:
Go to http://www.example.com/
Redirect to https://www.example.com/server.js
Below is my web.config file I'm using.
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
<!-- Redirect all http traffic to https -->
<rule name="Redirect to https" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>
Maybe you can try to install the extension named Redirect HTTP to HTTPS via the Azure portal, with this approach you have no need to add any rule for redirecting to HTTPS.

Resources