Question 84123 in Docker Question posted in
The official documentation can be found here.

Docker container with .net and react app not loading client

To Begin I have created .net core 6 project with react.js from visual studio 2022.
I have added docker to my project as well.

I have been following this tutorial.
"Quickstart: Use Docker with a React Single-page App in Visual Studio"

https://learn.microsoft.com/en-us/visualstudio/containers/container-tools-react?view=vs-2022

I came to the point where I’m able to build my image however when I’m starting my docker container it is running only my backend api, react app/client is not loading at all.

Any Ideas?

here is how my docker file looks like

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.


FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["admin_tool_api_ui/admin_tool_api_ui.csproj", "admin_tool_api_ui/"]
RUN dotnet restore "admin_tool_api_ui/admin_tool_api_ui.csproj"
COPY . .
WORKDIR "/src/admin_tool_api_ui"
RUN dotnet build "admin_tool_api_ui.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "admin_tool_api_ui.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "admin_tool_api_ui.dll"]
Tags:

2

Answers


  1. 0

    First of all, I feel your pain. Thanks to Microsoft documentation I’m now a person with high level of patiency, I learned to accept things as they are in life.

    Second, I think you are missing the front-end build, which is this piece:

    FROM node:16 AS build-web
COPY ./admin_tool_api_ui/ClientApp/package.json /admin_tool_api_ui/ClientApp/package.json
COPY ./admin_tool_api_ui/ClientApp/package-lock.json /admin_tool_api_ui/ClientApp/package-lock.json
WORKDIR /admin_tool_api_ui/ClientApp
RUN npm ci
COPY ./admin_tool_api_ui/ClientApp/ /admin_tool_api_ui/ClientApp
RUN npm run build

    So your final Dockerfile can be something like this:

    #See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.


FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443


FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["admin_tool_api_ui/admin_tool_api_ui.csproj", "admin_tool_api_ui/"]
RUN dotnet restore "admin_tool_api_ui/admin_tool_api_ui.csproj"
COPY . .
WORKDIR "/src/admin_tool_api_ui"
RUN dotnet build "admin_tool_api_ui.csproj" -c Release -o /app/build


FROM build AS publish
RUN dotnet publish "admin_tool_api_ui.csproj" -c Release -o /app/publish


FROM node:16 AS build-web
COPY ./admin_tool_api_ui/ClientApp/package.json /admin_tool_api_ui/ClientApp/package.json
COPY ./admin_tool_api_ui/ClientApp/package-lock.json /admin_tool_api_ui/ClientApp/package-lock.json
WORKDIR /admin_tool_api_ui/ClientApp
RUN npm ci
COPY ./admin_tool_api_ui/ClientApp/ /admin_tool_api_ui/ClientApp
RUN npm run build




FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
COPY --from=build-web /admin_tool_api_ui/ClientApp/build ./ClientApp/build
ENTRYPOINT ["dotnet", "admin_tool_api_ui.dll"]
    Login or Signup to reply.
  2. 0

    I just set property "Copy to Output directory" = "Copy always" for all React related files ClientApp directory hierarchy via "Properties" dialog.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search