search

dotnet-architecture / eShopOnContainers

Cross-platform .NET sample microservices and container based application that runs on Linux Windows and macOS. Powered by .NET 7, Docker Containers and Azure Kubernetes Services. Supports Visual Studio, VS for Mac and CLI based environments with Docker CLI, dotnet CLI, VS Code or any other code editor. Moved to https://github.com/dotnet/eShop.
https://dot.net/architecture
24.53k stars 10.35k forks source link

WebSPA Development in docker-compose Question #1973

Closed DKANomad closed 2 years ago

DKANomad commented 2 years ago

I have some questions regarding the WebSPA project, currently it seems like there isn't really an easy way to work on this in the docker-compose environment. How would you debug the app in this environment? Or is that not the intent? If so I would be interested to know the correct approach

From the docs it seems that the solution to getting the SPA to even load is to just run it in Release, also when attempting to run it in a non-docker environment, and in debug, it can't access the other services, meaning you don't really get the advantages of SPA Proxy and live reload when making changes, in fact making changes requires a full image rebuild.

My confusion comes from the fact that based on how the code is written, the intent appears to be to run the Angular app and it's ASP.NET Core app at the same time, but there doesn't seem to be an easy way to do this while also making use of the docker-compose environment and the other services.

Expanding on from this I tried to see if I could conditionally add the SPA Proxy to the docker container to try and make changes to the Angular app while running in the docker-compose environment.

I experimented with getting the SPA Proxy to work in the docker container as mentioned in this documentation. Adding the environment variable for ASPNETCORE_HOSTINGSTARTUPASSEMBLIES to the docker-compose.yml does work and SPA proxy loads correctly, but when it redirects, the angular app can't access the backend due to requests being made to a relative path (Same site).

I have also attempted to make use of the method mentioned here. Adding the DockerfileFastModeStage attribute to the .csproj and the build stage to the Dockerfile. However it looks like this isn't supported for docker-compose environments, only the single Dockerfile approach.

There's a fair bit here but If anyone has some insights into these questions, I'd appreciate it.

Hadsen commented 2 years ago

I started learning this techs and project recently, and i found that it takes up to 3 minutes on my PC to only compile and start WebSPA project in docker. As I've understood, it is probably because docker works with mounted windows files ~10x times slower. So I found no other out, but to do Angular development outside the docker, with self-hosted start option, and it is just working fine after changing some needed paths to localhost, or host.docker.internal. I start up multiple projects (2), docker-compose and WebSPA, and everything is working fine, including auth, hot reload, etc.. And it takes 15 seconds for Angular to start.

erjain commented 2 years ago

Hi @DKANomad, Thanks for posting here, I believe there are already some issues reported in the past related to running the application in debugging mode. I am mentioning one of the issues here, https://github.com/dotnet-architecture/eShopOnContainers/issues/1740, or you can visit the wiki page to get the correct approach: https://github.com/dotnet-architecture/eShopOnContainers/wiki/Windows-setup, let me know if this helps. I am closing this issue, however, feel free to continue the conversation here.

DKANomad commented 2 years ago

@erjain thanks for the response, my issue wasn't so much being unable to run the project in debug, I was able to do it in both self-host and remote mode with some small modifications to docker-compose.

My questions were more specific to the approach used in maintaining the development environment. @Hadsen's comment about using self-hosted mode works well enough. I also tried with running it in Docker as a single Dockerfile which ran but the Angular CLI kept timing out, I will keep messing around with it.

Thanks all for your responses

WolfspiritM commented 2 years ago

I also have to say that the "F5" experience for the webspa project is very bad. In general I think the integration of SPAs with .NET isn't very good at all. There for example is the new spaproxy which even so it's called spaproxy isn't really a proxy just a launcher and redirector causing ports to change and not actually going through the backend as they would in the real world. This can cause issues with docker.

In this project the SPA seems to be handled by the "SpaServices" which are deprecated without any clear upgrade path. Especially when it comes to SSR. It seems like Microsoft abondend SPAs and expects everyone to migrate to Blazor.

Hadsen commented 2 years ago

Microsoft.AspNetCore.SpaServices is obsolete. This project uses Microsoft.AspNetCore.SpaServices.Extensions, which is an actual replacement.