0

Created a new app in VS2022 from tamplate:

enter image description here

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. enter image description here

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: enter image description here

Error: enter image description here Please help

ShaneKm
  • 20,823
  • 43
  • 167
  • 296
  • Can you mention the error you get? – shehanpathi Jul 20 '22 at 14:25
  • added error screenshot – ShaneKm Jul 20 '22 at 14:32
  • I tried to access your site, maybe because you have modified something(like web.config), it is currently inaccessible. I'll add troubleshooting steps to the answer, please be patient and you'll be sure to fix this. – Jason Pan Jul 21 '22 at 04:57
  • I'm guessing that the problem is related to the environment issue of the local PC, such as the version of VS2022, npm, node. You can follow my answer to find the error, or create a new app and try again. – Jason Pan Jul 21 '22 at 05:43

2 Answers2

1

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

Microsoft Visual Studio Enterprise 2022 (64-bit) - Current Version 17.2.4

PM> node -v
v16.15.0
PM> npm -v
8.13.2

I know it works well in your local now, and please follow my suggestion to try .

enter image description here

Troubleshooting Steps:

  1. ⚠️Upgrade your visual studio 2022 to the latest version, and also update npm and node.

  2. Please create a new azure app service(.Net6 LTS), you can delete it later. We don't need do any setting in this app.

  3. 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.

  1. Publish this demo project

  2. Check the kusu site. url like: https://app_name.scm.azurewebsites.net

  3. Check the publish files. My demo create by template, have contain 1 wwwroot folder and 9 files.

    enter image description here

If you still want to figure out what's wrong with the current app, see the introduction below.

  1. Delete all the settings, make app service is clean. It means you can access the site like your second pic contains loading....

  2. Find the web.config file and change stdoutLogEnabled to true.

  3. Back to the azure portal and enable detailed error messages.

    enter image description here

  4. Restart the app and back to kudu site, and remember to refresh kudu site.

Jason Pan
  • 15,263
  • 1
  • 14
  • 29
0

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):

endpoints.MapFallbackToFile("index.html");

and also this:

endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");

Now my app works in Azure as well. Thank you

ShaneKm
  • 20,823
  • 43
  • 167
  • 296