Azure React deployment not loading

I'm trying to deploy a react application on azure web services. I followed all the steps on this article which got me to a status where the deployment is marked successful but the application is not accessible on the azure site.

Added a screenshot for reference below

I logged into the service through a cli session and checked if the data is available in the wwwroot folder which did have the build files in it.

Would be really thankful if any one of you can assist me to get this deployed

--- UPDATE ----

app log stream is showing the following

Connecting to log stream... 2024-09-02T10:58:05 Welcome, you are now connected to log-streaming service. Starting Log Tail -n 10 of existing logs ---- /appsvctmp/volatile/logs/runtime/container.log 2024-08-30T17:55:04.0960916Z at System.Net.Http.HttpClient.g__Core|83_0(HttpRequestMessage , HttpCompletionOption , CancellationTokenSource , Boolean , CancellationTokenSource , CancellationToken ) 2024-08-30T17:55:04.0960941Z at Microsoft.AspNetCore.Proxy.ProxyMiddleware.Invoke(HttpContext context) 2024-08-30T17:55:04.0960967Z at Kudu.Services.Web.Tracing.TraceMiddleware.Invoke(HttpContext context) in /tmp/KuduLite/Kudu.Services.Web/Tracing/TraceMiddleware.cs:line 107 2024-08-30T17:55:04.1259705Z [41m[30mfail[39m[22m[49m: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware1 2024-08-30T17:55:04.1261136Z An unhandled exception has occurred while executing the request. 2024-08-30T17:55:04.1261175Z System.IO.IOException: The response ended prematurely. 2024-08-30T17:55:04.1261328Z at System.Net.Http.HttpConnection.SendAsyncCore(HttpRequestMessage , Boolean , CancellationToken ) 2024-08-30T17:55:04.1261374Z at Kudu.Services.Web.Tracing.TraceMiddleware.Invoke(HttpContext context) in /tmp/KuduLite/Kudu.Services.Web/Tracing/TraceMiddleware.cs:line 107 2024-08-30T17:55:04.1261430Z at Microsoft.AspNetCore.ResponseCompression.ResponseCompressionMiddleware.InvokeCore(HttpContext context) 2024-08-30T17:55:04.1261456Z at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.g__Awaited|6_0(ExceptionHandlerMiddleware middleware, HttpContext context, Task task) Ending Log Tail of existing logs --- Starting Live Log Stream ---

I believe that you haven't correctly configured your Azure App Service to host static web apps.

First of all, an Azure App Service isn't really ideal for static web apps (which your compiled React app essentially is). You should really be looking into use Azure Static Web Apps. These are meant to host frontends developed using React, for example.

You could also consider, if price is a factor, to host the site on an Azure Storage Account using the Static Web option. You could then simply use Azure CDN on top to handle HTTPS certificates, Default Pages (index), Custom Domains, Caching, etc.

If you decide to stick with Azure App Service, you should be able to get your React app to work by changing your App Service's runtime environment to Node.

You can do this by heading to your Azure Portal, then over to your App Service. Once inside, you'll want to head to Settings --> Configuration in the right-hand side panel. Once there, select Node as the stack.