How to circumvent the .NET 6 SPA proxy for Angular applications?

Question

Edit: I managed to get this running through IIS with valid certificates, but I've not found a way to ditch the new proxy approach. Skip to end if you want some info on using IIS rather than IIS Express.

In short: Using the latest ASP.NET 6 and Angular template (Visual Studio 2022), how do you go about bypassing the reverse proxy and instead use the same approach as pervious version of .NET? I don't want to run the application via the SPA URL, with backend requests being forwarded to the SPA proxy.

To detail, my goal:

• No IIS Express
• Manually start the Angular Server via a terminal.
• Configure the ASP.NET application to connect to the Angular server, rather than spinning up its own instance,
• Have the the ASP.NET application run from a local instance of IIS 10, with a self signed certificate.
• Attach the debugger to w3wp as required.

I'd like to navigate to https://mydomain.local and have it serve everything, which was no issue prior to .NET 6. You'd use UseProxyToSpaDevelopmentServer, run npm start and all was good.

Although I'm aware you can still use it, .NET 6 ditches Startup.cs, and guidelines suggest to use the streamlined Program.cs going forward.

I have tried:

• Getting rid of the prestart script (aspnetcore-https.js)
• Getting rid of the proxy configuration (proxy.conf.js) by removing the proxyConfig property from angular.json
• Creating an IIS Launch profile and using provisioning
• Changing the SPA configuration values within the .csproj file.
• Getting rid of the --ssl flags (ssl, ssl-cert and ssl-key) in package.json
• Defining a non default host in angular.json
• Combinations of the aforementioned

Nothing seems to appears to work, the documentation isn't too great either.

At the moment:

• I have a working self signed certificate (created with mkcert)
• My domain is setup in the hosts file
• The application setup within IIS and I can load it, with a valid certificate.
• Upon loading, it looks for the valued defined by the SpaProxyServerUrl property in the csproj file
• The redirects to https://locaolhost:xxxxx once Angular is running, but the cert if never valid, and I want the pages to be served from https://mydomain.local

Any help would be much appreciated.

---

Update

I am not sure what was wrong with the self signed ASP.NET certificate. I simply removed all references of it and added them again.

• Remove certificates from %AppData%\Roaming\ASP.NET\https
• Clear SSL Cache via Internet Options (run command: inetcpl.cpl)
• Clear any security policies for the domain via chrome://net-internals/#hsts
• Clear down Chrome history (site settings, cached data etc. chrome://settings/clearBrowserData)
• Remove certificates from Windows Certificate Store (run command: mmc File --> Add/Remove Snap-In --> Certificates). Remove the personal certificate and the trusted root certificate
• Generate the certificates again, either via building the project in VS or running dotnet dev-certs https --trust

To ditch IIS Express and reply on a normal IIS Instance:

• Add your application as normal to IIS.
• Create a https binding, I suggest using mkcert to create a valid self signed certificate.
• Ensure the https port matches that defined in launchSettings.json
• Update launchSettings.json, feel free to remove any profiles you don't need. You want something akin to this:

{
    "iisSettings": {
        "windowsAuthentication": false,
        "anonymousAuthentication": true,
        "iis": {
            "applicationUrl": "https://yourdomain.local",
            "sslPort": 443
        }
    },
    "profiles": {
        "IIS": {
            "commandName": "IIS",
            "launchBrowser": true,
            "launchUrl": "https://yourdomain.local",
            "environmentVariables": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
            }
        }
    }
}

• Add a new proxy-conf file (I called my proxy-iis.conf) to your ClientApp folder, or update the existing one. If you create a new one, ensure you update angular.json to reference it accordingly.

const PROXY_CONFIG = [
    {
        context: [
            "/yourRoute",
        ],
        target: "https://yourdomain.local:443",
        secure: false,
        changeOrigin: true,
        logLevel: "info",
        headers: {
            Connection: 'Keep-Alive'
        }
    }
]

module.exports = PROXY_CONFIG;

• Check your .csproj file and ensure the port defined within <SpaProxyServerUrl></SpaProxyServerUrl> matches the one used angular.json

That's it, you'll be good to go. Start the Angular application manually, visit https://yourdomain.local and everything should be savvy.