[Fixed] How to run compiled SPA static files along with ASP.NET Core Web API publish in docker container?

Issue

I have created an ASP.NET Core Web API project with an empty wwwroot folder that is supposed to contain the static files of a SPA ClientApp that I have created in a separate folder in the same solution.

I have added the below in ConfigureServices:

  services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "wwwroot";
            });

Now, The ClientApp folder that I have is in the same solution as that of API project and the dockerfile is in my API project. What I want to do is to first generate static files using npm, copy it to wwwroot, build my API Project and on publish run it like a SPA would. I want to do all of that in a docker/docker-compose file.

I already have configured dockerfile for API:

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

WORKDIR /app
COPY    bin/Debug/net5.0 .

ENTRYPOINT [ "dotnet","DemoApp.dll" ]

And I want to do something like this:

### STAGE 1: Build ###
FROM node:12.7-alpine AS build

WORKDIR /app
COPY ../ClientApp/package.json ../ClientApp/package-lock.json ./

RUN npm install

COPY .../ClientApp .
RUN npm run build

### STAGE 2: Run ###
FROM mcr.microsoft.com/dotnet/aspnet:5.0

WORKDIR /app
COPY    bin/Debug/net5.0 .
COPY --from=build /app/wwwroot
ENTRYPOINT [ "dotnet","DemoApp.dll" ]

But, while building docker for angular, it throws error saying cannot find ClientApp. So, how can I acheive building angular app then deploying it to wwwroot then running API project in a single docker file? 

Note: While creating the project, I did not choose SPA template for backend as I wanted separation of concerns

Solution

So first your ClientApp folder should exist a level above the current directory on the host. Secondly, your paths to ClientApp are different for when you copy the package.json, and when you copy the remaining files. If npm install is going through fine (../ClientApp), then your npm run build path is wrong (…/ClientApp).

WORKDIR /app
COPY ../ClientApp/package.json ../ClientApp/package-lock.json ./

RUN npm install

COPY ../ClientApp .
RUN npm run build

You can also include the restore and build for the dotnet side of things as follows, rather than have to build this on the host before you copy the bin output.
FROM mcr.microsoft.com/dotnet/aspnet:5.0
WORKDIR /src
COPY "<path to .csproj>" ./
RUN dotnet restore
COPY . .
RUN dotnet build "<path to csproj" -c Release -o /app