how to get hot reload to work with React with Dotnet and Docker

Question

I'm trying to get hot reload to work with React, Docker and Dotnet.

However, from what i found on the internet only static rendering works with docker.

So i have to do

docker -t build {Name_of_file} everytime to see changes within React....

I'm sure there's a way to do this,

here's my dockerfile.

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build

RUN curl --silent --location https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install --yes nodejs

# Copy the source from your machine onto the container.
WORKDIR /src
COPY . .


RUN dotnet restore "./dotnet-test.csproj"

RUN dotnet publish "dotnet-test.csproj" -c Release -o /app/publish

FROM mcr.microsoft.com/dotnet/aspnet:5.0

# Expose port 80 to your local machine so you can access the app.
EXPOSE 80
EXPOSE 443


COPY --from=build /app/publish .

ENTRYPOINT ["dotnet", "dotnet-test.dll"]

If anyone has a github that does this let me know (:

Future me here!! Here is a link of me doing this with https

https://easyrun32.medium.com/net-5-react-docker-nginx-mysql-https-hotreload-50d87b32d492

Answer 1

Disclaimer: Not sure if this solution will work but give it a shot

Summary:

1. Use only the sdk image (runtime image won't work).
2. Use dotnet watch
3. Update .csproj file to include files to be watched

Long answer:

1. New Dockerfile

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build

RUN curl --silent --location https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install --yes nodejs

# Copy the source from your machine onto the container.
WORKDIR /src
COPY . .


RUN dotnet restore "./dotnet-test.csproj"

RUN dotnet publish "dotnet-test.csproj" -c Release -o /app/publish


# Expose port 80 to your local machine so you can access the app.
EXPOSE 80
EXPOSE 443

WORKDIR /app/publish
ENTRYPOINT ["dotnet", "watch", "dotnet-test.dll"]

2. Project File Changes

<ItemGroup>
    <!-- extends watching group to include *.js files -->
    <Watch Include="**\*.js" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
</ItemGroup>

This should work for the most part. Make quick updates to include/exclude more files.