After developing a NodeJS server in Typescript, I attempted to deploy it to an Azure Web App through VS19. While the project functions correctly internally, when published to Azure, I encountered permission issues.
The project was built using the "Basic Azure Node.js Express 4 Application" template available in VS19.
My understanding is that Azure utilizes IIS to host Typescript applications within an Azure Web App, hence requiring a web.config file, which I have included below.
I made a simple adjustment from "app.js" to "index.js," matching the name of my main app source file.
Upon accessing the Kudu web app shell, I noticed that the output of the Typescript compilation is structured as follows:
|-wwwroot
|---dist
|-----src
|--------index.js
|--------index.js.map
|--------environments
|--------middlewares
...
In reality, "index.js" and "index.js.map" should ideally be at the same level as "src."
To address this discrepancy, I adjusted the configuration of the Azure Web App to redirect its root virtual path to: site\wwwroot\dist\src.
If this change was not implemented, the application would return: "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
Currently, although the application attempts to access the resources, it encounters a permission issue displaying: "You do not have permission to view this directory or page."
I am considering altering the web.config file, but I have limited documentation on how to proceed and whether this is the right approach.
Here is an overview of the folder structure:
https://i.sstatic.net/JMqgS.png
tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es5",
"outDir": "./dist",
"baseUrl": ".",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
package.json (excluding dependencies):
{
"name": "project",
"version": "1.0.0",
"description": "Backend",
"main": "index.js",
"scripts": {
"test": "jest --verbose",
"test-watch": "jest --verbose --watchAll",
"dev": "nodemon --watch src -e js,ts,json --exec \"ts-node src/index.ts\"",
"build": "tsc --build",
"clean": "tsc --build --clean"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"@types/cors": "^2.8.13",
"@types/express": "^4.17.17",
"@types/jest": "^28.1.8",
...
}
}
web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<appSettings>
</appSettings>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
<modules runAllManagedModulesForAllRequests="false" />
<iisnode watchedFiles="web.config;*.js;routes\*.js;views\*.pug"/>
<handlers>
<add name="iisnode" path="index.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<clear />
<rule name="app" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
<match url="iisnode.+" negate="true" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="Rewrite" url="index.js" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>