ASP.NET Core run angular build before docker build

Question

We have a basic Docker file which need to build our ASP.NET Core application. Our frontend is an Angular2 one.

In our current process we do:

npm run build: build the angular2 frontend part, which write output JS files in /wwwroot. These files will be included by ASP.NET Core views and controllers.
Then we docker build which build and encapsulate our ASP.NET Core project. We then intend to deploy it anywhere.

Our DockerFile:

FROM microsoft/dotnet:latest
COPY . /app
WORKDIR /app

RUN ["dotnet", "restore"]
RUN ["dotnet", "build"]

EXPOSE 5000/tcp
ENV ASPNETCORE_URLS http://*:5000

ENTRYPOINT ["dotnet", "run"]

Our question

How to add in our dockerfiles steps to:

Run npm install required files for our Angular2 frontend. Our package.json file is at ASP.NET project root.
Run npm run build:prod: which build Angular2 project and generated files in wwwroot.

Before running dotnet build. We tried to simply try to indicate these commands before RUN ["dotnet", "build"] :

RUN npm install
RUN npm install -g angular-cli
RUN npm run build:prod

but Azure returns an "unexpected Error" without more details.

Did you tried using the script section in project.json (learn.microsoft.com/en-us/dotnet/articles/core/tools/…)? There are pre and post compile/processing triggers for it — Tseng
– Tseng, Commented Jan 12, 2017 at 15:57
Yes i tried it but since we use Angular-cli to build, I encoutered problems with VisualStudio. I opened a question about it but it seems to be a dead end: stackoverflow.com/questions/41575174/… — BlackHoleGalaxy
– BlackHoleGalaxy, Commented Jan 12, 2017 at 15:59
I see. Also you may want to consider to use dotnet publish instead, this will generate binaries file and put these binaries into your docker container similar to Scott's blog hanselman.com/blog/…. Your current approach also seems to include the source code into the docker container, which I'd personally consider a bad idea to deploy your source code on the servers (in case your server gets compromised). — Tseng
– Tseng, Commented Jan 12, 2017 at 16:03
Ok i will look into it. I already tried to create a post/prepublish event but it always returns an error in VS2015. But how to add my npm install and npm run build:prod commands? — BlackHoleGalaxy
– BlackHoleGalaxy, Commented Jan 12, 2017 at 16:14
Each entry in the array is one command: "prepublish": [ "npm install","npm run build:prod" ], etc. The default project.json already has npm install as prepublish step. Not sure how it changes with csproj yet — Tseng
– Tseng, Commented Jan 12, 2017 at 16:16

Pradeep Kumar · Accepted Answer · 2017-02-20 04:51:36Z

1

Its not possible to run npm commands directly from the docker file, the docker engine needs a program like a shell or powershell to execute npm commands. That is the reason the coomand RUN npm install in the docker file does not work.

You can try specifying powershell to be used to run npm command

RUN powershell -NoProfile -Command RUN npm install

I suggest an alternative option as below

In the root of the solution, Create a build script build.sh with npm commands, dotnet restore, build, publish and run commands.

#!bin/bash
set -e
npm install
npm install -g angular-cli
npm run build:prod
dotnet restore
dotnet test test/WebTests/project.json
dotnet publish src/Web/project.json -c release -o $(pwd)/publish/web
dotnet run

Note: 1.The build.sh above is just a sample, add remove and edit as per your need.

2.Make sure that the file build.sh does not have windows specific line endings otherwise shell will have trouble executing it.

From the root of your solution, open your power shell prompt Now we can directly use the aspnetcore build image to run the application as below

docker run -it --rm -v "$pwd\:/sln" microsoft/aspnetcore-build:1.0.1 sh ./build.sh

The option -v "$pwd\:/sln" mounts the current directory as /sln directory in the container.

Refer to a very well written MSDN article Optimized Docker Images

answered Feb 20, 2017 at 4:51

Pradeep Kumar

1,3397 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeppe Over a year ago

@BlackHoleGalaxy Can i ask, where is npm installed in these scripts? It doesn't come with microsoft/dotnet:latest right?

Collectives™ on Stack Overflow

ASP.NET Core run angular build before docker build

Our question

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Our question

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related