React app not working on azure

Question

I have a react app deployed on azure app service using node 18 on windows instance.But my app not loading app . just blank page appears with the page title referring to index.html. I can see the directory listing when browse the app URL and upon clicking public folder ,it opens blank index.html page publishing mode - code

runtime stack - Node - ~18 following app settings I have done port - 80 websites_port - 80 WEBSITES_CONTAINER_START_TIME_LIMIT - 1800 WEBSITE_NODE_DEFAULT_VERSION

Answer 1

-- Hello @Sharma, Gaurav !  

Welcome to Microsoft QnA!

Please activate logs and provide logging Have a look if you have ENV values , you should add them to Application Configurations Sample from my WebSite : https://www.cloudblogger.eu/2023/12/11/custom-identity-database-with-azure-sql-and-web-apps/

I hope this helps!

Kindly mark the answer as Accepted and Upvote in case it helped!

Regards

Answer 2

@Sharma, Gaurav There could be several reasons for this issue. Let's try to troubleshoot the issue step by step. First, make sure that your React app is running correctly on your local machine. You can do this by running the following command in your app directory:

npm start

If your app is running correctly on your local machine, then the issue might be related to the deployment process. Here are a few things you can check: Make sure that you have deployed the correct build of your React app to Azure App Service. You can do this by running the following command in your app directory:

npm run build

This will create a build directory in your app directory. Make sure that you have deployed the contents of this directory to Azure App Service.

1. As Passadis mentioned in their answer, check the logs of your Azure App Service instance. You can do this by going to the Azure portal, selecting your app service instance, and then selecting "Log stream" under the "Monitoring" section. This will show you the logs of your app service instance in real-time. Look for any errors or warnings related to your app.
2. Make sure that your app service instance is running the correct version of Node.js. You can check this by going to the Azure portal, selecting your app service instance, and then selecting "Configuration" under the "Settings" section. Make sure that the "Node.js version" setting is set to the correct version of Node.js that your app requires. Check the port number that your app is running on. By default, React apps run on port 3000. However, Azure App Service expects your app to run on port 80. You can set the port number that your app runs on by setting the PORT environment variable. You can do this by going to the Azure portal, selecting your app service instance, and then selecting "Configuration" under the "Settings" section. Add a new application setting with the name PORT and the value 80.