CODEWITHSUNDEEP
reactjsasp.netasp.net-corevisual-studio-2022
ShaneKm
ShaneKm

Reputation: 21328

ASP.NET Core with React.js fails to run in Azure

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

Upvotes: 0

Views: 881

Answers (2)

ShaneKm
ShaneKm

Reputation: 21328

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

Upvotes: 0

Jason Pan
Jason Pan

Reputation: 21883

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.

Upvotes: 2

Related Questions