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

Muhammad Hunain Zubair 5 Reputation points
2024-03-11T06:07:26.6733333+00:00

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

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

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,141 questions
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
6,839 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. JasonPan - MSFT 4,201 Reputation points Microsoft Vendor
    2024-03-11T07:37:43.3666667+00:00

    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.

    User's image

    **
    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


  2. Bruce (SqlWork.com) 55,196 Reputation points
    2024-03-11T22:48:25.9366667+00:00

    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(...);