How to deploy this new 'React and Dotnet' Template, Which is Added in Visual Studio Version 17.8?

Question

I am trying to containerize this new 'React And Dotnet' template and want to deploy it as a single app on Azure App Service, like the previous one 'React With Dotnet' was available in Visual studio till version 17.7

Example Of template

Docker File According to the docs here

#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Docker file to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
WORKDIR /app
EXPOSE 8080
EXPOSE 8081

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:8.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

ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["barcodebtpl.client/nuget.config", "barcodebtpl.client/"]
COPY ["BarcodeBTPL.Server/BarcodeBTPL.Server.csproj", "BarcodeBTPL.Server/"]
COPY ["barcodebtpl.client/barcodebtpl.client.esproj", "barcodebtpl.client/"]
RUN dotnet restore "./BarcodeBTPL.Server/./BarcodeBTPL.Server.csproj"
COPY . .
WORKDIR "/src/BarcodeBTPL.Server"
RUN dotnet build "./BarcodeBTPL.Server.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./BarcodeBTPL.Server.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

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

I know it is deployable as a single app reference but unable to do so.

I have tried it to run in docker but it is only showing the swagger UI and when i am trying the base path directly e.g. https://localhost:32776/ it is giving me 404 although it should render the weather forecast table as it in the the App.tsx.

App.tsx

Update I have tried it to deploy on azure app service directly and it worked but not working with docker i don't know why so most probably there is an issue in my docker file.

Answer 1

Hi @Muhammad Hunain Zubair,

The reason for 404 is we are using app.Environment.IsDevelopment() condition inside the Program.cs.

And we can find the start url here in launchSettings.json file. When you start the app, it will try to open the swagger page, instead of the default page inside the wwwroot.

**
What we need to do ?**
Delete the /swagger , and it will work properly.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Jason

Answer 2

please don't double post the same question. (copy of answer to previous post).

the template server code does not support static files. in dev, the vite web server proxies to webapi. with IIS or nginx , the webserver supports the static files. for your app to support static files in docker you need to add the static file handler and if you don't want to specify /index.html, the default files middleware:

app.UseDefaultFiles();
app.UseStaticFiles();
app.Get(...);