Deploy ASP.NET Core with React SPA to docker

  .net-core, asp.net-core, docker, npm

I’m trying to deploy an asp.net-core spa to a docker container but I’m having troubles in doing that.

This is the image that I’m using

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

FROM mcr.microsoft.com/dotnet/sdk:5.0-buster-slim AS build
RUN apt-get update -yq 
    && apt-get install curl gnupg -yq 
    && curl -sL https://deb.nodesource.com/setup_10.x | bash 
    && apt-get install nodejs -yq

WORKDIR /src
COPY ["Web/TWeb.csproj", "Web/"]
RUN dotnet restore "Web/Web.csproj"
COPY . .
WORKDIR "/src/Web"
RUN dotnet build "Web.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "Web.csproj" -c Release -o /app/publish

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

And this is the .csproj file

<Project Sdk="Microsoft.NET.Sdk.Web">

    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
        <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
        <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
        <IsPackable>false</IsPackable>
        <SpaRoot>ClientApp</SpaRoot>
        <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules**</DefaultItemExcludes>
        <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
    </PropertyGroup>   

    <ItemGroup>
        <!-- Don't publish the SPA source files, but do show them in the project files list -->
        <Compile Remove="ClientAppsrcstore**" />
        <Content Remove="$(SpaRoot)**" />
        <Content Remove="ClientAppsrcstore**" />
        <EmbeddedResource Remove="ClientAppsrcstore**" />
        <None Remove="$(SpaRoot)**" />
        <None Remove="ClientAppsrcstore**" />
        <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules**" />
    </ItemGroup>
    
    <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
        <!-- Ensure Node.js is installed -->
        <Exec Command="node --version" ContinueOnError="true">
            <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
        </Exec>
        <Error Condition="'$(ErrorCode)' != '0'" Text="...." />
        <Message Importance="high" Text="..." />
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    </Target>

    <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">

        <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" Condition="'$(ASPNETCORE_ENVIRONMENT)'=='Production'" />
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm run start" Condition="'$(ASPNETCORE_ENVIRONMENT)'=='Development'" />

        <!-- Include the newly-built files in the publish output -->
        <ItemGroup>
            <DistFiles Include="$(SpaRoot)build**; $(SpaRoot)build-ssr**" />
            <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
                <RelativePath>%(DistFiles.Identity)</RelativePath>
                <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
                <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
            </ResolvedFileToPublish>
        </ItemGroup>
    </Target>

</Project>

This is the error which I’m getting

[1] Ensure that ‘npm’ is installed and can be found in one of the PATH
directories. Current PATH enviroment 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.

Inspecting the container, I can confirm that node and npm are installed.

Some help would be much appreciated.

Source: Docker Questions

LEAVE A COMMENT