I work at a mainly Microsoft shop, a lot of our internal apps consist of an Angular front end with a tightly coupled C# WebApi back end.
In the past we would structure this as a single solution with 2 projects.
- Web Api project (.csproj)
- Empty Web Project (.csproj) - we would scaffold our angular front end into this empyt web project
We use Jenkins for CI/CD and would have a SQ scan happen first and foremost before anything was built/deployed.
We used the SonarScanner for MSBuild tools available for Jenkins. This setup has worked great for us for years. The scan would run and publish scan results from BOTH projects out to the corresponding SQ project/dashboard.
Now with the release of .Net 6 and VS2022, a new project type was introduced, Standalone TS/JS templates for Angular/Vue/React.
The new project is “.esproj”.
Since our Angular front ends are pure TS/html/css, this is a better option for us instead of the old “Empty Web Project” C# based route - plus it’s easier to wire the frontend/backend together with this new project type. MS published an article on how to do this and is essentially the same as we’ve been doing for years using two csproj’s
Unfortunately, it breaks our Jenkins/SQ implementation.
The source files for the angular front end are no longer included as part of the scan results.
MSBuild doesn’t actually build the esproj so the static ts/html/css files aren’t picked up at the time of scanning.
We figure our options at this point are:
- Stick with a single SQ project for scan results, and continue to use two C# projects for both the webapi and angular code - the scanner for msbuild will still pick up all files in both projects.
- Create two separate SQ projects to post scan results, one for the back end and one for the front end. Then scan separately, using SonarScanner for MsBuild for the backend project and the common sonar-scanner for the front end.
Are we missing anything?
Curious, any chance there will be updates to SonarScanner for MSBuild that will recognized these new .esproj projects and scan the ts/js/html/css files contained within?
Thanks in advance for any insight you can provide.