Workflow for running .Net Core 8 Angular SPA locally in prod mode #35703
Description
[EDIT by guardrex to add the metadata. Note, @Ro3A that it's always best if you can to open an issue for us from the bottom of an article. The metadata is added automatically, and the doc author receives an automatic ping. I'll manually put the metadata for this at the bottom of this OP.]
In the older templates, the user was expected to manually run ng build -c=production or --prod which would generate the dist folder. The startup.cs file, by default, would only start the Angular Dev server using if env.IsDevelopment() was true which left IIS Express looking only for the dist folder and would serve it up.
During a publish, the csproj file, by default, contained the PublishRunWebpack target which could be customized with conditional commands based on ASPNETCORE_ENVIRONMENT or Configuration etc. These files would then be copied to the publish directory.
This was all fairly straight forward.
The new templates seem to lack, by default, support for running in prod mode locally, or even publishing in prod mode and documentation makes no explicit mention of doing so.
In my case, I'm specifically interested to understand Microsoft's expected workflow for running the Angular SPA in production mode locally as we are building out and debugging a PWA, which requires prod mode, which will not run in angular dev server - only IIS Express. I also want to ensure my dev team doesn't have to jump through hoops and prefer to have them change the build configuration, or the aspnetcore_environment, to achieve this.
There also seems to be a significant change in how files are located. I've seen the posts about the /browser folder, and the need to copy files manually to wwwroot when running in IIS Express lmode. I've also seen where this may have been a bug in the esproj version.
There are many variations of implementations and work arounds I've seen, but all seem quite over complicated and give me pause as surely Microsoft has an intended pattern for this.
I have tried conditional XML in csproj to handle multiple build configurations, which dynamically run correct package.json commands during local dev. I've even made the SpaProxyLaunchCommand and ServerUrl conditional, based on build configuration to prevent the dev server from being started. This then leads to the need to manually copy files from the esproj. However, I've not been able to correctly ensure esproj gets built (or finished running a package.json command) before copying the files when hitting F5 - this process only works when doing an explicit build.
In summary, here's what I'm looking for:
- Microsoft's intended pattern for running .net Core 8 SPA in prod mode, locally, without dev server (PWA testing, etc)
- If environment or build specific code is required in startup.cs, this should be documented.
- If environment or build specific code is required in esproj, or csproj, this should be documented.
Document Details
⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.
- ID: 32a18270-91cd-2a02-2eb8-2c8b1ed03737
- Version Independent ID: c58d57e5-a0c2-201d-f6dd-076ad5971fcb
- Platform ID: cdb364c2-4247-a09b-4908-9a1f383fe5e7
- Content: Use Angular with ASP.NET Core
- Content Source: aspnetcore/client-side/spa/angular.md
- Service: aspnet-core
- Sub-service: client-side
- GitHub Login: @SteveSandersonMS
- Microsoft Alias: stevesa