Visual Studio 2017 Docker support not available for ASP.Net Core Angular or React projects

Question

Does anyone have any insight as to why Visual Studio 2017 has a check box that enables Docker support for ASP.NET Core for Empty, Web API, Web Application and Web Application (MVC) templates, but not for the SPA templates Angular, React.js, or React.js and Redux ?

Are there any resources showing how to add Docker support to these SPA templates? My google-fu is strong, but I can't find any.

Answer 1

I'm not sure why that checkbox is disabled when selecting the template during project setup. However, you can still add Docker support by doing the following:

1. Setup project
2. Right click project in the solution explorer
3. Hover over add
4. Click Docker support

What this will do is create some docker-compose files and a single Dockerfile that basically just uses dotnet CLI to run the publish command on the solution. There's nothing specific about the frontend code. By default, when using those templates, the webpack build information is put into the .csproj file. You can learn more about the Add Docker Support feature here .

Below is how to add docker support on Visual Studio for Mac 2017, but it works the same on Windows.

Answer 2

The reason you are seeing that error is that for SPA projects, the csproj contains commands to run steps defined in the package.json to do packaging (ng build, webpack, etc.). And that requires Node to be INSIDE the build container that needs to be added explicitly. You will have to ensure that the Node version you use in the container will work with the build image that you have chosen. Most times it should not be an issue, but in case it is at least you are now aware.

You will need to add the following to the Dockerfile after the dotnet build and before the dotnet publish steps as below. My example uses Node 10.13 since that is what is supported by the build image that we pull for Azure Container deployments.

RUN dotnet build ...

# **** Adding Node - Start
ADD https://nodejs.org/dist/v10.13.0/node-v10.13.0-win-x64.zip "C:\build\node-v10.13.0-win-x64.zip"
RUN PowerShell Expand-Archive C:\build\node-v10.13.0-win-x64.zip C:/
RUN PowerShell Rename-Item C:\node-v10.13.0-win-x64 node
RUN SETX PATH C:\node
ENTRYPOINT C:\node\node.exe
# **** Adding Node - End

FROM build AS publish
RUN dotnet publish ...