How use docker with dotnet ReactJs application template in Visual Studio

Question

First, I created a dotnet react application.

dotnet new react -n ReactApp

Next, I opened the project in visual studio and right-clicked the project Add/Container Orchastrator Support. This created some docker configuration and a dockerfile file.

The file system looks like the following picture.

And the docker file is as follows:

# See https://aka.ms/containerfastmode to understand how Visual Studio uses this  
# Dockerfile to build your images for faster debugging.

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

WORKDIR /app
EXPOSE 80
EXPOSE 443

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

FROM build AS publish
RUN dotnet publish "PBS.Hypercomb.React.csproj" -c Release -o /app/publish

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

Then in the debug menu I clicked on Debug/Docker Compose and the application ran up until it started to complain about missing npm.

// ERROR AS FOLLOWS
[1] Ensure that 'npm' is installed and can be found in one of the PATH directories.
Current PATH environment variable is: /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
Make sure the executable is in one of those directories, or update your PATH.

I found someone showing to add the following code after the FROM ... base command so I tried.

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

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

#ADDED this code to supposedly install npm on the linux container
RUN apt-get update && \
    apt-get install -y wget && \
    apt-get install -y gnupg2 && \
    wget -qO- https://deb.nodesource.com/setup_6.x | bash - && \
    apt-get install -y build-essential nodejs

#ADDED this code to supposedly install npm on the linux container


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

FROM build AS publish
RUN dotnet publish "PBS.Hypercomb.React.csproj" -c Release -o /app/publish

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

Unfortunately, I am still receiving the same errors.

Answer 1

You've installed node/npm in the 'base' section of your dockerfile. It needs to be in the 'build' section, like this

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

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
#ADDED this code to supposedly install npm on the linux container
RUN apt-get update && \
    apt-get install -y wget && \
    apt-get install -y gnupg2 && \
    wget -qO- https://deb.nodesource.com/setup_6.x | bash - && \
    apt-get install -y build-essential nodejs

#ADDED this code to supposedly install npm on the linux container
WORKDIR /src
COPY ["PBS.Hypercomb.React.csproj", "."]
RUN dotnet restore "PBS.Hypercomb.React.csproj"
COPY . .
WORKDIR "/src/"
RUN dotnet build "PBS.Hypercomb.React.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "PBS.Hypercomb.React.csproj" -c Release -o /app/publish

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