How to dockerize my app having an SPA inside?

Question

I have a dotnet application serving an SPA inside. It is inside a folder called client. To run the app in my local machine, I follow the below 2 steps:

1. In the folder client, I run the following command: npm run build
2. In the root of the project folder, I run: dotnet run

Now I want to dockerize my app and I added the following file:

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["WebApplication2/WebApplication2.csproj", "WebApplication2/"]
RUN dotnet restore "WebApplication2/WebApplication2.csproj"
COPY . .
WORKDIR "/src/WebApplication2"
RUN dotnet build "WebApplication2.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "WebApplication2.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "WebApplication2.dll"]

How can I add the first step that I run npm run build into this file, so I can browse the dockerized app successfully?

Thanks,

Answer 1

If you want to do Docker multi-stage builds, then you can split tasks something like this. The main thing is the separation of concerns, so that tasks 1 and 2 could run outside of Docker if needed.

## TASK 1 is the .NET build, requiring the .NET SDK

FROM mcr.microsoft.com/dotnet/sdk:6.0 as website-builder

WORKDIR /tmp
COPY WebSite /tmp
dotnet publish WebSite.csproj -c Release -r linux-x64 --no-self-contained



## TASK 2 is the web static content build, requiring the Node.js SDK

FROM node:18.15.0 as static-content-builder

WORKDIR /tmp
COPY StaticContent /tmp
RUN npm install --production
RUN npm run build



## TASK 3 is the release image, with only a .NET runtime

FROM mcr.microsoft.com/dotnet/aspnet:6.0

WORKDIR /usr/mywebsite
COPY --from=website-builder        /tmp/     /usr/mywebsite/
COPY --from=static-content-builder /tmp/dist /usr/mywebsite/static/

RUN adduser --disabled-password --home /home/websiteuser --gecos '' websiteuser
USER websiteuser
CMD ["dotnet", "mywebsite.dll"]