Created a new app in VS2022 from tamplate:
Everything runs fine locally and I get the Json payload successfully (fetch-data).
However, when deployed to Azure it does not. It looks as if routing does not work for some reason.
I’ve tried different suggestions here:
React JS App Routing Issue Only After Deploying to Azure Web App
React routing not working in Azure website
https://social.msdn.microsoft.com/Forums/en-US/836324ff-2893-4eca-828d-0ac47f8fc5bf/azure-web-app-service-react-routing-amp-deploy-problem?forum=windowsazurewebsitespreview
Azure Configuration: Tried nesting wwwroot, that didn’t work either:
2
Answers
Looks like I was using an old template that came with VS2022. I updated my VS version, created a new project from template and noticed this line was added in Startup.cs (in this new template):
and also this:
Now my app works in Azure as well. Thank you
I have followed the steps you provided, and the demo application works well in my side. And I think your app service is normal, the issue should be related to publish file.
Test Environment
I know it works well in your local now, and please follow my suggestion to try 😁.
Troubleshooting Steps:
⚠️Upgrade your visual studio 2022 to the latest version, and also update npm and node.
Please create a new azure app service(.Net6 LTS), you can delete it later. We don’t need do any setting in this app.
Create a sample project in VS2022, and test it in local, make sure it works well.
The above steps ensure that the VS environment is up-to-date and the app environment is initial.
Publish this demo project
Check the kusu site. url like:
https://app_name.scm.azurewebsites.net
Check the publish files. My demo create by template, have contain 1 wwwroot folder and 9 files.
If you still want to figure out what’s wrong with the current app, see the introduction below.
Delete all the settings, make app service is clean. It means you can access the site like your second pic contains
loading...
.Find the
web.config
file and changestdoutLogEnabled
totrue
.Back to the azure portal and enable detailed error messages.
Restart the app and back to kudu site, and remember to refresh kudu site.