Update spa templates to facilitate multi-stage docker builds

[tmds]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

The spa templates use npm for the client-side, and dotnet for the server-side.

The .NET sdk container images do not provide npm. So they can not be used directly to build the spa templates.

Another option is to use a multi-stage build, with a separate stage that uses a node image. The templates are not written to support this scenario.

Describe the solution you'd like

With some tweaks to the template, the project can more easily support a multi-stage build that has a node/npm stage.

$ dotnet new angular -o angular
$ cd angular

Modify the csproj:

     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
     <SpaRoot>ClientApp\</SpaRoot>
+    <SpaBuildCommand>npm run build -- --prod</SpaBuildCommand>
     <SpaProxyServerUrl>https://localhost:44411</SpaProxyServerUrl>
     <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
     <ImplicitUsings>enable</ImplicitUsings>
@@ -33,8 +34,8 @@
   
   <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
     <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
-    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
-    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
+    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" Condition="'$(SkipSpaBuild)' != 'True'"/>
+    <Exec WorkingDirectory="$(SpaRoot)" Command="$(SpaBuildCommand)" Condition="'$(SkipSpaBuild)' != 'True'"/>
 
     <!-- Include the newly-built files in the publish output -->
     <ItemGroup>

This app can be built using the following multi-stage Dockerfile:

# Publish Spa
FROM node:lts-alpine as node-build
WORKDIR /src
COPY . ./
# cd to csproj <SpaRoot>
WORKDIR /src/ClientApp
# restore npm dependencies
RUN npm install
# run csproj <SpaBuildCommand>
RUN npm run build -- --prod

# Publish application
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS dotnet-build
USER 0
WORKDIR /src
COPY . ./
# Copy SpaRoot
COPY --from=node-build /src/ClientApp /src/ClientApp
RUN dotnet restore .
# Skip Spa build during publish
RUN dotnet publish --no-restore -c Release -o /out . /p:SkipSpaBuild=True

# Build application image
FROM mcr.microsoft.com/dotnet/aspnet:6.0
COPY --from=dotnet-build /out /app
CMD ["dotnet", "/app/angular.dll"]

Additional context

No response

[tmds]

@davidfowl @richlander ptal.

[javiercn]

@tmds thanks for contacting us.

This is a good point. At the very least we should have docs covering this scenario.

[ghost]

Thanks for contacting us.

We're moving this issue to the .NET 7 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[richlander]

Repeating @javiercn ... this is a good point.

We should have a design constraint of Docker build-ability. I can see that MSBuild and Docker are not easy to align. Perhaps there needs to be a way to suppress the node/npm commands within msbuild or alternatively specifically target those commands.

@glennc @danroth27

[tmds]

It would be great if we can update the templates to facilitate this scenario.

The changes are not complex, and it will provide a common pattern for doing the multi-stage build.

If it helps, I can make a PR with a suggestion and we can refine it.

[javiercn]

@tmds I'm ok if we do something on the project to skip the node steps when building inside docker. There is an environment variable we can use.

I do have a repo where I did something similar to what you did. https://github.com/javiercn/AngularWithDocker

Anything here I'm happy if we key it off of '$(DOTNET_RUNNING_IN_CONTAINER)' == ''

@richlander What would need to happen here for us to update the dockerfiles/docker images to better support SPAs?

[javiercn]

Based on investigations, I think it is better we document that you need to install node into the container image in an extra stage and do the build there

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build-with-spa
RUN bash -E $(curl -fsSL https://deb.nodesource.com/setup_18.x | bash - ); apt install -y nodejs

From build-with-spa as build

[javiercn]

I have filed a separate issue dotnet/dotnet-docker#3909 to consider adding an additional container image that already contains the node tools installed for web projects.

[tmds]

Multi-stage builds are best practice and allow to manage build dependencies as images.

I have filed a separate issue dotnet/dotnet-docker#3909 to consider adding an additional container image that already contains the node tools installed for web projects.

They allow the people that build dotnet-docker images to focus on .NET.
While others focus on maintaining nodejs images.

[javiercn]

Multi-stage builds are best practice and allow to manage build dependencies as images.

That doesn't conflict with the existence of a simpler option for many people. You don't get that flexibility when you aren't using containers and we consider that to be good enough.

I understand that the approach offers some advantages, but it also exposes the user to more complexity that is not necessarily needed in many cases. You can still setup a multi-stage build if you choose to do so even if we offer a simplified process.

[tmds]

Because it's a best practice, it would be nice if the templates support it.

[mkArtakMSFT]

We've decided not to make this change in the framework and instead include more details in docs about how to achieve this. /cc @javiercn