Problems accessing a basic Web App on NodeJS

Question

Problems accessing a basic Web App on NodeJS

Paul Simon 25

I have tried to create the most basic web app I can think out. I have created it under my personal account, rather than my work account, so no AD involved. I first tried to deploy it from my Git repository. That failed with lots of typescript errors actually in node modules which I obviously cannot change. These should be output as warnings rather than errors since the server runs Ok locally.

I then deployed from VS Code. That seemed to work successfully. However, when I clicked the link to access the web site it just says You do not have permission to view this directory or page.

Given that according to the Authentication section I am the owner of the App, why would I not have access?

This is a API Server rather than a Static Web App so there are no web pages, but I was expecting to be able to add to the URL to make a call and get some JSON back.

There is lots of documentation but I soon get lost in all the Azure specific terminology.

Can anyone tell me what might be wrong, or point me in the direction of a simple set of steps to set up something basic?

Paul Simon 25 Reputation points

2023-09-13T21:59:17.28+00:00

Ignore the tag of Azure Static Web Apps. The Azure Web Apps option did not seem to be available.
BCSK 5 Reputation points

2023-09-14T22:28:10.1866667+00:00

It sounds like you're encountering some issues with deploying your web app on Azure. Here are some suggestions and steps you can take to troubleshoot and potentially resolve the problem:

Check Azure Portal Permissions: Ensure that you are logged into the Azure Portal with the correct account (the one under which you created the web app) and that you have the necessary permissions to view and access the resources.

Authentication and Authorization: Verify the authentication and authorization settings for your web app. Double-check that you have set the appropriate permissions for yourself as the owner. Sometimes, even though you're the owner, you may need to explicitly grant access.

Deployment Errors: If you encountered TypeScript errors during deployment, it's essential to address them. Even though the server runs locally, some configurations may differ in the Azure environment. Resolve those TypeScript errors before deployment to ensure a successful deployment.

Configuration Settings: Review your web app's configuration settings, especially the routes and endpoints. Ensure they are correctly set up to handle the API requests and return JSON responses.

Azure Documentation: While Azure can be overwhelming due to its vast array of services and terminologies, it's crucial to go through Azure's official documentation specific to your scenario. Look for guides on deploying Node.js applications or API services on Azure, which should provide step-by-step instructions.

Azure Support: If you continue to face issues, consider reaching out to Azure support. They can assist you with specific problems related to your Azure account and resources.

Community and Forums: Don't hesitate to ask questions on Azure-specific forums or communities. Azure users and experts often provide valuable insights and solutions.

Logs and Diagnostics: Check the Azure logs and diagnostics for your web app. They can provide detailed information about any errors or issues that occurred during deployment or runtime.

By following these steps and reaching out for assistance when needed, Mickeyminors you should be able to identify and resolve the issues you're facing with your Azure web app deployment.

Accepted answer

2 additional answers

Your answer

Paul Simon 25 Reputation points

2023-09-13T21:59:17.28+00:00

Ignore the tag of Azure Static Web Apps. The Azure Web Apps option did not seem to be available.

Answer 1

ajkuma 28,036 Microsoft Employee Moderator

To benefit the community, posting the summary of our discussion offline.

Scenario: Problems accessing a basic Web App on NodeJS

Issue: Facing an application error, unauthorized error and 4xx errors

Cause: Application error and port issue

Resolution: Set the port in the application setting

Reference:

https://azureossd.github.io/2023/03/24/Default-exposed-ports-of-Azure-App-Service-Linux-Blessed-Images/

https://azureossd.github.io/2023/02/15/Whats-the-difference-between-PORT-and-WEBSITES_PORT/

Paul Simon, thanks for your collaboration!

Paul Simon 25 Reputation points

2023-09-27T19:19:07.37+00:00

A couple of other points. Deploy at linux rather than windows.

As well as PORT set NODE_ENV to production in Configuration, Application Settings. You can put other settings in there so there is no need to push a .env.production file into GitHub.

PORT must be 8080 for HTTP or 443 for HTTPS, no other options are possible.

If you get errors when your app is deployed, to check logs go to Development Tools section, then Advanced Tools, and click Go.

When the URL comes up add /newui to the end. Then access File Manager, and then select the LogFiles folder. Look at the two most recent files. In the one suffixed default_docker.log scroll to the bottom and search up for 'Error'
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-09-28T05:08:42.3733333+00:00

Thank you for the follow-up and sharing additional points, Paul. It's much appreciated.

Answer 2

ajkuma 28,036 Microsoft Employee Moderator

Firstly, apologies for the delayed response from over the weekend and any inconvenience with this issue.

Just to clarify, are you leveraging Azure App Service WebApp or Azure Static WebApps?

-The error output typically indicates you are missing a web.config file. When using the App Service Build engine, one will be generated, but if using a service like GitHub Actions, you will need to configure your own web.config.

-You may also inspect the log files from the browser at https://<app-name>.scm.azurewebsites.net/api/logs/docker

To fetch more details about the issue, you may try these:

-You may leverage App Service diagnostics from Azure Portal> Navigate to your App Service app in the Azure Portal. (screenshot below) In the left navigation, click on Diagnose and solve problems - Review - “Configuration and Management and “Availability and Performance” options.

User's image

Kindly let us know how it goes, I'll follow-up with you further.

For more information, checkout these docs:
#you-do-not-have-permission-to-view-this-directory-or-page

Reference : Troubleshooting Common iisnode Issues

Paul Simon 25 Reputation points

2023-09-12T23:16:03.87+00:00

Hi Ajkuma, Please don't apologise for the late reply. I am just glad that someone replied. As I mentioned This is an API Server rather than a Static Web App. I think Azure calls this a Web App rather than a Azure App Service WebApp, but there is so much terminology in Azure it is very confusing. Essentially it is NodeJS App that responds to API calls via HTTP and returns JSON results via HTTP. There is no Web Front End - it is pure NodeJS - no React, Vue, etc. Another bit of the App is in React but that will be a separate Static Web App. I went the Git Hub route initially because I wanted CI/CD, but gave up as that failed to build with errors in the node_modules. I then used the Azure add in for VS Code and that seems to have got it built. However, I cannot access it. I saw some references to Web.Config but did not know if that was relevant as I have only ever needed a Web.Config with ASP.Net, never with NodeJS. I could not see how to create one anyway or find any documentation on what should go into it. I will try your suggestions tomorrow. Once again thanks for the reply. Regards Paul
Paul Simon 25 Reputation points

2023-09-13T21:55:52.6066667+00:00

Hi ajkuma

I tried going to

https://EXXXXServ.scm.azurewebsites.net/api/logs/docker

Just got

"No route registered for '/api/logs/docker'"

I went to Diagnose and Solve Problems -> Configuration Management and got

Error: Currently no worker is assigned to the app service plan. The site cannot serve any requests.

(Don't under stand what this means)

It is on a Free plan.

There is nothing in the App Service Plan section on Azure that seems to allow you to assign a worker.

Warning: We found that the web app has no autoscale profiles configured

(Not likely to be a problem the app will only have about 10 users)

Warning: No backups ran for this app in 24 hrs time period

(Not a problem as no changes and could just upload again)

Pasted "Currently no worker is assigned to the app service plan. The site cannot serve any requests." into Search for Common problems or tools

No matches.

Tried Ask Genie

Just comes up with is "...not running App Service Plan for production workloads". I don't need production workloads. This is just dev and test.

Deployment failed.

Added a web.config I found on the internet as a standard for node.js. Where does this go? I assumed in the root of the project?

Deployment failed.

Seem to have now got VS Code set up so that push to dev and merge to main in GitHub now automatically triggers the deployment, which is the CI/CD I was looking for. I did not get this option in VS Code Azure tab before today. Perhaps something to do with adding the web.config to the root of the project?

I thought the issue may have been that it was looking for ./dist/server.js, but I am guessing that the deployment copies the whole /dist folder to the root, and therefore it needs to look for ./server.js.

Last deployment shows Success(Active)

However, I got an email saying

Build and deploy Node.js app to Azure Web App - EXXXXServ: Some jobs were not successful

Build and deploy Node.js app to Azure Web App - EXXXXServ / build

Failed in 1 minute and 3 seconds

Build and deploy Node.js app to Azure Web App - EXXXServ / deploy

Skipped

So why is Deployment Centre saying successful and active, but the email says that the build failed and the deployment was skipped?

All the logs say the deployment worked and it ends with the message Deployment successful.

When I click in the email on View workflow run, it is showing errors such as

build: node_modules/@types/express-serve-static-core/index.d.ts#L1

Type expected.

These are errors in core express modules, not modules I have written.

Why is this happening?

When I look at the Deployment log it says successful but also says Start script "./server.js" from package.json is not found.

so the /dist/ folder was not the issue. I have reverted that back. What is the issue - why can't it find server.js?

Why is it using the start script instead of the serve script if this is actually referring to scripts defined in package.json?

It just cannot find anything even though it is there in Git Hub. How do I check the files that have actually been deployed? When I look at wwwroot in the console, I see a copy of my source code, not the built dist folder.

There is also this

npm WARN config production Use --omit=dev instead.

What does this mean?

On my laptop I have NODE_ENV set to development

I presume this is running as production?

The app is set up to work for either.
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-09-14T11:18:46.16+00:00

Thanks for the follow-up and sharing additional info. I' have followed-up further with you offline. Please take a look the suggestions provided by Bruce and let us know how it goes.
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-09-15T08:38:18.3966667+00:00

Paul, Thanks for the follow-up offline with the requested details. I'll post back a summary after we have found a solution/something concrete.

Answer 3

Bruce (SqlWork.com) 77,686 Volunteer Moderator

you don't say what template you used to create the node app. but if you got typescript errors, on deployment, you probably require a build tool. so you probably have to

npm run build

to build a /dist (or some name) folder.

after the build, cd to the /dist folder and type

node server.js

the site should run error free.

now deploy this folder to azure with your favorite tool. vscode, cli, PowerShell, etc

Paul Simon 25 Reputation points

2023-09-14T22:17:35.4433333+00:00
Hi Bruce,

Sorry, I don't know what you mean by the template I used to create the node app?

If on my local machine I do npm run build, it transpiles the typescript to javascript and puts it into the dist folder. I can then do npm run serve, and the server runs, and quite happily responds to requests from my React front end. At this stage I am only trying to get the NodeJS backend server deployed to Azure, not the React front end. The typescript transpiler does produce 'error' messages about issues in node_modules that I cannot control, because I didn't write them, but despite these 'errors' the tsc transpiler is creating javascript files that run. I think this is just typescript being its fussy self and these 'errors' are really just warnings. It is complaining about issues in express, if that stopped Azure running things then nothing in node would work.

In package.json, the scripts section is

"scripts": { "build": "tsc", "dev": "ts-node-dev --no-notify ./src/ts/server.ts stylus .", "start": "node ./dist/server.js", "prod": "npm run Build && npm start", "watch": "tsc --watch", "test": "cd test && npm run test", "serve": "node --experimental-modules ./dist/server.js" },

When I created the Web App in Azure, I linked it to my GitHub account so that when I merge into the main branch of the repository it automatically deploys to Azure.

When I look at the main_eXXXXX.yml that Azure created in my GitHub repository I can see

on: push: branches: - main workflow_dispatch: jobs: build: runs-on: windows-latest steps: - uses: actions/checkout@v2 - name: Set up Node.js version uses: actions/setup-node@v1 with: node-version: '18.x' - name: npm install, build, and test run: | npm install npm run build --if-present npm run test --if-present - name: Upload artifact for deployment job uses: actions/upload-artifact@v2 with: name: node-app path: . deploy: runs-on: ubuntu-latest needs: build environment: name: 'Production' url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} steps: - name: Download artifact from build job uses: actions/download-artifact@v2 with: name: node-app - name: 'Deploy to Azure Web App' uses: azure/webapps-deploy@v2 id: deploy-to-webapp with: app-name: 'EXXXXServ' slot-name: 'Production' publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_XXXXXXXXXXXXXXXXXXXX }} package: .

I am guessing that at some point in this it should be deploying just the dist folder and then that would match up with the path that Azure seems to be trying to use to run the server which is .\server.js rather than .\dist\server.js.

I also notice that the build runs on windows but the deploy is running on ubuntu linux. I am not sure if that is an issue?

When I check in the console in Azure, what actually seems to get deployed to C:\home\site\wwwroot\ is the original code that was extracted from GitHub, plus the node_modules, so clearly the npm install step above has worked. What doesn't get deployed is the \dist\ folder. Therefore something seems to have gone wrong in the generation of this YAML file. Do you know how to fix that, or how to regenerate the correct YAML file? Either that or the deploy is going to some ubuntu box but the console only shows me the windows box.

Regards

Paul
Paul Simon 25 Reputation points

2023-09-15T07:39:38.5966667+00:00

Thinking about this, although they may be problems in the deploy part of this script, not to mention problems in security, etc, the current blocker seems to be that the build stage is being counted as failing and therefore the deploy part is not being run. Does anyone have any ideas on why on my local machine the build is producing a working dist folder while on Azure it is not? I will do some searches on the typescript errors to see if I can find anything.
Paul Simon 25 Reputation points

2023-09-27T19:17:56.6566667+00:00

A couple of other points. Deploy at linux rather than windows.

As well as PORT set NODE_ENV to production in Configuration, Application Settings. You can put other settings in there so there is no need to push a .env.production file into GitHub.

PORT must be 8080 for HTTP or 443 for HTTPS, no other options are possible.

If you get errors when your app is deployed, to check logs go to Development Tools section, then Advanced Tools, and click Go.

When the URL comes up add /newui to the end. Then access File Manager, and then select the LogFiles folder. Look at the two most recent files. In the one suffixed default_docker.log scroll to the bottom and search up for 'Error'

Share via

Problems accessing a basic Web App on NodeJS

2 additional answers

Your answer