React app deployment issue on Azure App Service

Question

I have a React app deployed on Azure App Service. Package.json file is in the client folder. When I run the app, I'm getting these app logs and I get a timeout after 1800 seconds.

2024-01-23T09:24:39.837Z INFO  - Starting container for site
2024-01-23T09:24:39.839Z INFO  - docker run -d --expose=80 --name xxxxxxxx_0_947e0bff -e WEBSITE_USE_DIAGNOSTIC_SERVER=true -e PORT=80 -e WEBSITES_PORT=80 -e WEBSITE_SITE_NAME=xxxxxxx-e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_HOSTNAME=xxxxxxx.azurewebsites.net -e WEBSITE_INSTANCE_ID=xxxxxxxxx-e HTTP_LOGGING_ENABLED=1 -e NODE_OPTIONS=--require /agents/nodejs/build/src/Loader.js appsvc/node:20-lts_20231109.3.tuxprod pm2 serve /home/site/wwwroot/client/build --no-daemon --spa
2024-01-23T09:24:40.321Z INFO  - Initiating warmup request to container xxxxxxxx_0_947e0bff for site xxxxxxx
2024-01-23T09:24:55.419Z INFO  - Waiting for response to warmup request for container xxxxxx_0_947e0bff. Elapsed time = 15.097723 sec

Note: all the sensitive info is masked as xxxxxx

I have added two configuration keys as

port : 80
websites_port : 80 
WEBSITES_CONTAINER_START_TIME_LIMIT - 1800

Start up command

 pm2 serve /home/site/wwwroot/client/build --no-daemon --spa

I tried changing port to 8080 and 443 but it is still the same. Deployment files looks fine in wwwroot folder on Azure

Runtime stack is node on linux. I'm not using container. App service is created directly using code on linux server.

Nothing seems to be working for me like changing the port, timeout and start up command. Would appreciate any help

Answer 1

I tried a sample ASP .NET Core Web API with React JS, and it was successfully deployed to an Azure Web App.

Code :

Program.cs :

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddCors(c => {
    c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});

var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseSwagger();
app.UseSwaggerUI(x =>
{
    x.SwaggerEndpoint("/swagger/v1/swagger.json", "Web API V1");
    if (app.Environment.IsDevelopment())
        x.RoutePrefix = "swagger"; 
    else
        x.RoutePrefix = string.Empty;
}
);
app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.MapFallbackToFile("/index.html");
app.Run();

I deployed the ASP.NET Core Web API to the Azure Web App first as below:

ASP .net core Web API output in Azure:

Ensure that the localhost URL is replaced with the web app URL provided below before deployment.

https://<webapp_name>.azurewebsites.net/WeatherForecast

WeatherForecast.js :

import React, { useState, useEffect } from 'react';
import './WeatherForecast.css';

function WeatherForecast() {
  const [forecasts, setForecasts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://<webapp_name>.azurewebsites.net/WeatherForecast');
        if (response.ok) {
          const data = await response.json();
          setForecasts(data);
        } else {
          console.error('Error fetching data:', response.statusText);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>Weather Forecast</h2>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <table>
          <thead>
            <tr>
              <th>Date</th>
              <th>Temperature (C)</th>
              <th>Summary</th>
            </tr>
          </thead>
          <tbody>
            {forecasts.map((forecast, index) => (
              <tr key={index}>
                <td>{forecast.date}</td>
                <td>{forecast.temperatureC}</td>
                <td>{forecast.summary}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}
export default WeatherForecast;

I published my ReactJS app through VS Code, as shown below.

The web app was successfully deployed to Azure, as shown below:

React js output in Azure: