Containerizing Angular 6 SPA Template ASP .NET Core 2.1 Applications

UPDATE from 11/01/2018 {
Thanks to the help in the comments, below is a more ideologically correct version of the docker file.

The standard Angular SPA Template project template contains an error. Developers in the version of net .core 2.1. removed from the microsoft / dotnet: 2.1-sdk image used to build the nodejs, but the code in the project file uses it. Read more here github.com/aspnet/Announcements/issues/298 You
need to manually edit the project file * .csproj, removing the following code

Code to remove from * .csproj

  <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 run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

Correct dockerfile

ARG NODE_IMAGE=node:8.12FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base
WORKDIR /app
EXPOSE 80FROM microsoft/dotnet:2.1-sdk AS build
WORKDIR /src
COPY ["AngularWebApp/AngularWebApp.csproj", "AngularWebApp/"]
RUN dotnet restore "AngularWebApp/AngularWebApp.csproj"
COPY . .
WORKDIR "/src/AngularWebApp"
FROM ${NODE_IMAGE} as node-build
WORKDIR /src
COPY AngularWebApp/ClientApp .
RUN npm install
RUN npm run build -- --prodFROM build AS publish
RUN dotnet publish "AngularWebApp.csproj" -c Release -o /app
FROM base AS final
WORKDIR /app
COPY--from=publish /app .COPY--from=node-build /src/dist ./ClientApp/dist
ENTRYPOINT ["dotnet", "AngularWebApp.dll"]

}

Unfortunately, I did not find a ready solution anywhere. I had to compile information from several sources. To run the Angular 6/7 application in the docker as a project on ASP .NET Core.

If we include standard support for the docker for the project with the Angular application, then the docker file will create an image of the microsoft / dotnet based application: 2.1-aspnetcore-runtime image. This base image does not include the node.js server. And the ASP .NET Core error will be output in the execution results.

An unhandled exception occurred while processing the request.
The NPM script ‘start’ exited without indicating that the Angular CLI was listening for requests

To resolve this error, you need to update the Docker file by adding the node.js and angular installation.
In addition, since the development goes under Windows, and it all runs in a Ubunty-based Docker container, if scss or sass style files are used, they are compiled by Angular CLI using node-sass, and at startup produced an error “Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime ”. You must run the command:

npm rebuild node-sass

npm will download the necessary scripts for the current platform and rebuild the css files.

The resulting Docker file for the Angular application based on the ASP .NET Core 2.1 project is as follows

FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base
# Setup NodeJs
RUN apt-get update && \
    apt-getinstall -y wget && \
    apt-getinstall -y gnupg2 && \
    wget -qO- https://deb.nodesource.com/setup_8.x | bash - && \
    apt-getinstall -y build-essential nodejs
RUN npm install @angular/cli -g
# End setup
WORKDIR /app
EXPOSE 80FROM microsoft/dotnet:2.1-sdk ASbuild
WORKDIR /src
COPY ["AngularWebApp/AngularWebApp.csproj", "AngularWebApp/"]
RUN dotnetrestore"AngularWebApp/AngularWebApp.csproj"
COPY . .
WORKDIR "/src/AngularWebApp"
RUN dotnetbuild"AngularWebApp.csproj" -c Release -o /app
FROMbuildAS publish
RUN dotnet publish "AngularWebApp.csproj" -c Release -o /app
FROM base ASfinal
WORKDIR /app
COPY --from=publish /app .
WORKDIR /app/ClientApp
RUN npm install
RUN npm rebuild node-sass
WORKDIR /app
ENTRYPOINT ["dotnet", "AngularWebApp.dll"]

I used the stable LTS release of Node.js, at the moment 8.x, but can be changed to any more relevant.

In addition, I also note that Windows forgives errors associated with different case of characters, but Linux does not forgive this. And the project that worked during development will refuse to compile in the container, yielding an error

docker ERROR in error TS1149: File name'filename.ts' differs from already included file name'FileNames.ts'onlyin casing

In order to avoid such errors at compile time, I recommend adding the appropriate option “forceConsistentCasingInFileNames”: true to the tsconfig.json file in the compilerOptions section

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true
    }
  }
}

angular, angular6 / 7, asp .net core 2.1, docker

Tags:

Containerizing Angular 6 SPA Template ASP .NET Core 2.1 Applications

Also popular now: