Error in Deploying Node.js app on Web app

Question

Error in Deploying Node.js app on Web app

Violet Zeng 30

I want to deploy my Node.js web app through github repo.
I already created a Azure Web App and linked to my github repo with runtime stack NODE ~18. My app includes an app.js file and a public folder with related .html and .js files. I also add these necessary file names into 'Default Documents'.
I also set up the github workflow and environment following this instruction. My Web App was able to deploy succesfully, but the [projectname].azurewebsites.net is only printing my app.js code, instead of the actual web content.
My app.js was able to run successfully on local server using Node.js with version 18.16.0.
Is there any other steps I need to do to successfully deploy my app?

Boris Von Dahle 3,221 Reputation points

2023-06-21T22:06:27.0466667+00:00

Hello,

The problem is that your file is served as a static file.

If you are using Static Web Apps, you will need to switch to using Azure Web Apps.
Violet Zeng 30 Reputation points

2023-06-22T00:06:01.3766667+00:00

Hi, I'm currently using the Web App instead of Static Web App. Is there anything else that might cause the problem?
Boris Von Dahle 3,221 Reputation points

2023-06-22T04:11:26.2633333+00:00

Please make sure that the Node.js version in the Configuration section of your Web App in the Azure Portal and in your package.json match.

https://learn.microsoft.com/en-us/azure/app-service/configure-language-nodejs?pivots=platform-linux
Violet Zeng 30 Reputation points

2023-06-22T21:02:57.3866667+00:00

My Web App is NODE ~18 and my package.json file set my engines with node 18.16.0, so I think they are the same. I also added a sample web.config file. Right now in my repo, it has app.js, package.json, web.config, node_modules folder, public folders (.html, .js, .css files). However, although my github workflow was successful, but my web app is showing error 500 (This page isn’t workingmaphcp.azurewebsites.net is currently unable to handle this request.). I also check that all files are copied into 'wwwroot' directory.
SnehaAgrawal-MSFT 22,706 Reputation points Moderator

2023-06-27T06:32:06.17+00:00
@Violet Zeng

Based on the information you provided, it seems that you have successfully deployed your Node.js web app to Azure Web App using Github workflow. However, when you access the app URL, it only shows the app.js code instead of the actual web content.

To resolve this issue, you can try the following steps:

Make sure that your app.js file is correctly configured to serve the web content. You can check this by running your app locally and accessing it through a web browser.

Check if your app is running correctly on Azure Web App. You can do this by navigating to the "Logs" section of your Azure Web App and checking for any errors.

Check if your app is correctly configured to serve static files. You can do this by adding the following code to your app.js file app.use(express.static('public'));

Make sure that your app is correctly configured to use the correct port. You can do this by adding the following code to your app.js file:

javascript const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Listening on port ${port}`) });

Also see if your app is correctly configured to use the correct Node.js version. You can do this by adding the following code to your package.json file then further if your app is correctly configured to use the correct runtime stack. You can do this by navigating to the "Configuration" section of your Azure Web App and checking the "Runtime stack" setting.

See- https://learn.microsoft.com/en-gb/archive/blogs/azureossds/debugging-node-js-apps-on-azure-app-services

https://learn.microsoft.com/en-us/azure/app-service/app-service-web-nodejs-best-practices-and-troubleshoot-guide

Let us know.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Your answer

Boris Von Dahle 3,221 Reputation points

2023-06-21T22:06:27.0466667+00:00

Hello,

The problem is that your file is served as a static file.

If you are using Static Web Apps, you will need to switch to using Azure Web Apps.
Violet Zeng 30 Reputation points

2023-06-22T00:06:01.3766667+00:00

Hi, I'm currently using the Web App instead of Static Web App. Is there anything else that might cause the problem?
Boris Von Dahle 3,221 Reputation points

2023-06-22T04:11:26.2633333+00:00

Please make sure that the Node.js version in the Configuration section of your Web App in the Azure Portal and in your package.json match.

https://learn.microsoft.com/en-us/azure/app-service/configure-language-nodejs?pivots=platform-linux
Violet Zeng 30 Reputation points

2023-06-22T21:02:57.3866667+00:00

My Web App is NODE ~18 and my package.json file set my engines with node 18.16.0, so I think they are the same. I also added a sample web.config file. Right now in my repo, it has app.js, package.json, web.config, node_modules folder, public folders (.html, .js, .css files). However, although my github workflow was successful, but my web app is showing error 500 (This page isn’t workingmaphcp.azurewebsites.net is currently unable to handle this request.). I also check that all files are copied into 'wwwroot' directory.
SnehaAgrawal-MSFT 22,706 Reputation points Moderator

2023-06-27T06:32:06.17+00:00

@Violet Zeng

Based on the information you provided, it seems that you have successfully deployed your Node.js web app to Azure Web App using Github workflow. However, when you access the app URL, it only shows the app.js code instead of the actual web content.

To resolve this issue, you can try the following steps:

Make sure that your app.js file is correctly configured to serve the web content. You can check this by running your app locally and accessing it through a web browser.

Check if your app is running correctly on Azure Web App. You can do this by navigating to the "Logs" section of your Azure Web App and checking for any errors.

Check if your app is correctly configured to serve static files. You can do this by adding the following code to your app.js file app.use(express.static('public'));

Make sure that your app is correctly configured to use the correct port. You can do this by adding the following code to your app.js file:

javascript const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Listening on port ${port}`) });

Also see if your app is correctly configured to use the correct Node.js version. You can do this by adding the following code to your package.json file then further if your app is correctly configured to use the correct runtime stack. You can do this by navigating to the "Configuration" section of your Azure Web App and checking the "Runtime stack" setting.

See- https://learn.microsoft.com/en-gb/archive/blogs/azureossds/debugging-node-js-apps-on-azure-app-services

https://learn.microsoft.com/en-us/azure/app-service/app-service-web-nodejs-best-practices-and-troubleshoot-guide

Let us know.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Share via

Error in Deploying Node.js app on Web app

Your answer