I have an AngularJS app built on top of Node.JS that is hosted in Azure (IIS) and uses HTML5 mode. In situations where I don't use Node.JS and just use AngularJS with IIS I can rewrite URLs so that a page refresh doesn't cause a 404 error using the following rule in the IIS Web.config:
<rule name="AngularJSHTML5Mode" stopProcessing="true">
<match url=".*"/>
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
</conditions>
<action type="Rewrite" url="/"/>
</rule>
However, when using Angular on top of Node.js (with ExpressJS) I get an error such as "Cannot GET /myroute" on page refresh, even with the above rule in IIS. Is there something I need to configure in Server.js or a different rule in Web.config.
Here is what I have in Express at the moment. I am using Express 4:
// Initialize Express App
var app = express();
var listener = app.listen(1337, function () {
console.log('Listening on port ' + listener.address().port); //Listening on port 1337
});
app.use(express.static(__dirname + "/public"));
I understand that page refreshes shouldn't happen in a SPA as a matter of practice, but they do, and I need to account for this.