The solution for this can be found here.
Combing Web Site and dcproj project types
When working within Visual Studio on a dotnet core API, you may need to add an existing SPA web application that was maybe created outside of Visual Studio, e.g. using the Angular CLI to generate the application for you using “ng new”, to an existing Visual Studio Solution. You can do this by right clicking the solution, and selecting “Add – Add Existing Web Site” and navigating to the folder of the SPA – please see the ./DcprojWebAppDockerDemo/Before/src directory, there is an example SPA is called demo-ui.
You may then decide that you’d like to use Docker to containerise your applications ready for pushing in to Azure Container registry, before deploying into Azure using AKS or an App Service.
Visual Studio 2019 has the ability to add Docker support for applications, this produces a project with the extension .dcproj and adds the docker-compose and docker-compose.override files for the selected project as shown in the image below for the sample application, which allows you to debug multiple containers at once within Visual Studio:
Docker-compose
This is where it starts to get interesting when combining the use of a Web Site project type with the dcproj file. If you set the startup project as the Docker Compose project, and then try building, you will receive the following error:
MSB3202 The project file “……\DcprojWebAppDockerDemo\Before\src\demo-ui\” was not found.
However, if you open a command prompt and run “docker-compose build”, the solution builds fine and the images are created:
To prove this runs fine, we can now issue a “docker-compose up” command to spin up the containers:
The Solution
We have a few options, we can either switch to Visual Studio Code and work from this IDE, leaving behind Visual Studio, or we can change the folder structure of where the Web Sites dockerfile lives, update the docker-compose file to point to this new location, rebuild, and like magic the solution will build, run and debug with no issues.
To see an example of this, look in the example source code repository here. Inside the ./DcprojWebAppDockerDemo/After/src directory you will see that the Dockerfile in demo-ui has now been moved to the .docker directory, and the docker-compose file has been updated to point to the new location:
