Deploying a Typescript-enabled Express application on the Azure cloud platform

Question

Deploying a Typescript-enabled Express application on the Azure cloud platform

Currently, I am attempting to deploy an Express server on Typescript on Azure by following the guidelines provided in this tutorial: https://learn.microsoft.com/en-us/azure/app-service/quickstart-nodejs?tabs=windows&pivots=development-environment-vscode

The application is a simple dummy app with a basic "Hello World" in an index.ts file. However, I am encountering several issues during the deployment process.

Upon trying to access the website, the message I receive is: "You do not have permission to view this directory or page."

Upon inspecting the deployed folder, I noticed that there is no web.config file present. Despite setting the "SCM_DO_BUILD_DURING_DEPLOYMENT" parameter to true, it fails to generate the file.

Below is an excerpt from my package.json file:

{
  "name": "test-azure-3",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "prebuild": "tslint -c tslint.json -p tsconfig.json --fix",
    "build": "tsc",
    "prestart": "npm run build",
    "start": "node .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^17.0.14",
    "tslint": "^6.1.3",
    "typescript": "^4.5.5"
  }
}

Here are my settings in Azure:

https://i.sstatic.net/rdGIW.png

https://i.sstatic.net/m5PxI.png

(I find it a bit unexpected to see .Net as the stack)

If you require any additional information, please feel free to ask!

EDIT: Following Felipe's suggestion, I went ahead and created a separate Azure project for the dist folder, but unfortunately, the issue persists.

https://i.sstatic.net/VwQqF.png

typescript azure express deployment build

Answer 1

Answer №1

After facing some challenges, I eventually stumbled upon a solution that may not be ideal for everyone struggling with the same issue.

Switching from Azure to Heroku proved to be the key for me. Not only did it work within minutes, but it also provided a more user-friendly experience (at least in my opinion).

I came across a helpful tutorial that guided me through the process: https://medium.com/developer-insights/deploying-typescript-node-js-applications-to-heroku-19b8t45h3qg6

Answer 2

After facing some challenges, I eventually stumbled upon a solution that may not be ideal for everyone struggling with the same issue.

Switching from Azure to Heroku proved to be the key for me. Not only did it work within minutes, but it also provided a more user-friendly experience (at least in my opinion).

I came across a helpful tutorial that guided me through the process: https://medium.com/developer-insights/deploying-typescript-node-js-applications-to-heroku-19b8t45h3qg6

Answer 3

Answer №2

When utilizing Azure app service, it has the capability to retrieve a zip file if one is present. In order to achieve this, you need to compress your dist folder in the pipeline and utilize that repository as the source for the app service. If you are working with Azure repos, the process is quite simple. Include the following code in your pipeline configuration file:

 - script: |
     npm run build
   displayName: 'npm build'
   
 - task: ArchiveFiles@2
   inputs:
     rootFolderOrFile: 'dist'
     includeRootFolder: true
     archiveType: 'zip'
     archiveFile: 'dist.zip'
     replaceExistingArchive: true

Your start script in package.json file should be configured as follows:

"start":"node dist/index.js"

Furthermore, Azure app service relies on docker containers which expose port 8080. Thus, your application must be operational on port 8080.

Answer 4

When utilizing Azure app service, it has the capability to retrieve a zip file if one is present. In order to achieve this, you need to compress your dist folder in the pipeline and utilize that repository as the source for the app service. If you are working with Azure repos, the process is quite simple. Include the following code in your pipeline configuration file:

 - script: |
     npm run build
   displayName: 'npm build'
   
 - task: ArchiveFiles@2
   inputs:
     rootFolderOrFile: 'dist'
     includeRootFolder: true
     archiveType: 'zip'
     archiveFile: 'dist.zip'
     replaceExistingArchive: true

Your start script in package.json file should be configured as follows:

"start":"node dist/index.js"

Furthermore, Azure app service relies on docker containers which expose port 8080. Thus, your application must be operational on port 8080.

Answer 5

Answer №3

After reviewing everything we covered:

Keep in mind that web config is specific to IIS, NodeJS is not impacted by it;
Make sure to execute "npm run build" and publish only the files in the "dist" folder. This will create an index.js file in the main directory, which Node will use to run your application. Avoid running .ts files in a production environment;
Include the necessary environment variables in the "Application Settings" on Azure. This will provide your app with the required variables for operation;
Consider setting the PORT variable to 80 as Azure may expect your app to run on port 80;

Answer 6

After reviewing everything we covered:

Keep in mind that web config is specific to IIS, NodeJS is not impacted by it;
Make sure to execute "npm run build" and publish only the files in the "dist" folder. This will create an index.js file in the main directory, which Node will use to run your application. Avoid running .ts files in a production environment;
Include the necessary environment variables in the "Application Settings" on Azure. This will provide your app with the required variables for operation;
Consider setting the PORT variable to 80 as Azure may expect your app to run on port 80;

Deploying a Typescript-enabled Express application on the Azure cloud platform

Answer №1

Answer №2

Answer №3

Similar questions

The function successfully triggers when clicked using (React, JS, TS) but does not respond to key presses

Angular button press

The aesthetic of the material tree design is not being reflected as expected

The attribute 'attribs' is not found on the 'Element' type in cheerio

What is the method for defining the type of a variable without assigning a value to it?

Error: User validation failed because the password field is empty. Please make sure to provide a password

What is the process for transferring items in carts to a new session after logging in?

We encountered an issue: `TypeError: expressJwt function is undefined`

Some specific pages in my Express/EJS application seem to hang indefinitely on "Waiting for localhost..."

Uploading Files within Angular FormArray

Issue with updating arrays in Mongoose not functioning as expected

In Next.js, I am experiencing an issue where the Tailwind class is being added, but the corresponding

Is there a way to keep a button in a "pressed" state after it has been clicked?

Are the functions 'useEffect' and 'useCallback' being repetitively used in this case?

Error TS2307: Module 'bluebird' not located

Trap mistakes while utilizing async/await

Discover the seamless process of retrieving user details from Postman API with a single click of the submit button on the front-end using Express and Node.js

Transfer data from Node.js to J2ee via binary upload and receive a corresponding reply

Tips for using conditional rendering with React and TypeScript

What is the best way to redirect nodejs requests to a separate nodejs application?