How to get Reactjs spa app with .net6 running on nginx?

Question

Hi I have a reactspa app that uses identity server for authentication. I am trying to publish the app to my Ubuntu Nginx server but when I do, that app just shows my loading screen for the app but doesn’t do anything else. I F12 to look at the console and it shows that the static files from the build folder are having a 404 not found error.

I have the spa static file folder setup to “client app/build” in the startup.cs. I also have added the homepage variable to the package.json file.

My domain root has a wordpress front facing site and my react app is in a subdirectory called /app.

My nginx domain config looks like this:

server {

       root /var/www/mydomain.com;
       index index.php index.html index.htm index.nginx-debian.html;

       server_name mydomain.com www.mydomain.com;

       location = /favicon.ico { log_not_found off; access_log off; }

       location = /robots.txt { log_not_found off; access_log off; allow all; }

       location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
               expires max;
               log_not_found off;
       }

       location / {
              #try_files $uri $uri/ =404;
              try_files $uri $uri/ /index.php$is_args$args;
       }

       location ^~ /app {
              proxy_pass http://localhost:5000;
              proxy_http_version 1.1;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection keep-alive;
              proxy_set_header Host $host;
              proxy_cache_bypass $http_upgrade;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header X-Forwarded-Proto $scheme;
       }

       location ~ \.php$ {
              include snippets/fastcgi-php.conf;
              fastcgi_pass unix:/run/php/php7.4-fpm.sock;
       } 

   listen [::]:443 ssl ipv6only=on; # managed by Certbot
   listen 443 ssl; # managed by Certbot
   ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem; # managed by Certbot
   ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem; # managed by Certbot
   include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
   if ($host = www.mydomain.com) {
       return 301 https://$host$request_uri;
   } # managed by Certbot


   if ($host = www.mydomain.com) {
       return 301 https://$host$request_uri;
   } # managed by Certbot


       listen 80;
       listen [::]:80;

       server_name mydomain.com www.mydomain.com;
   return 404; # managed by Certbot




}

I also have added this to my startup.cs as suggested by the ms docs:

// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
   configuration.RootPath = "ClientApp/build";
});

using Microsoft.AspNetCore.HttpOverrides;

...

app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});

app.UseAuthentication();

app.UseSpa(spa =>
{
  spa.Options.SourcePath = "ClientApp";

  if (env.IsDevelopment())
  {
     spa.UseReactDevelopmentServer(npmScript: "start");
  }
});

Im not sure what else to do. When I add the PUBLIC_URL to my env file in my react app, that points to ClientApp/Build, it finds the static files but then it gives me a 404 error with the error message could not load settings for _configuration/clientapp. Any suggestions?