InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request. Your application is running in Production mode, so make sure it has been publ

Mendenzon Tatis Rosario 20

This happened before with another application of mine which I was able to fix by removing the use redirect. However, this time it seems to be more complex, I am using dotNet 7 for the application and React for the front end all my checks are successful on github actions but the internal server error persists with the Spa not finding the indix.html. I also tried using the useFallBack(index.html) but the error persist.

JasonPan - MSFT 4,281 Reputation points Microsoft Vendor

2024-03-20T06:57:50.39+00:00
Hi @Mendenzon Tatis Rosario,

Could you share more details about this issue ?

Like:

The screenshot of the contents under the wwwroot folder(publich files)?

Your Program.cs code, we need to check the middleware order.

The structure of your Project.

The .csproj file, we need to check how the react project build during the deployment?

Best Regards

Jason
Mendenzon Tatis Rosario 20 Reputation points

2024-03-20T07:17:35.0166667+00:00

JasonPan-
Please see the files from my SPA.cs file and Startup.cs

I use dotNet 7 for the middle tier AspNetCore and React.js for the client side. everything build and runs fine locally but on the azure side I get the exception that cant find the index.html. Also I do not use wwwroot folder for the deployment, everything is handled through github actions CI/CD.
Mendenzon Tatis Rosario 20 Reputation points

2024-03-20T07:21:09.34+00:00

Hi @JasonPan - MSFT

Thank you for the request.

I do not use wwwroot everything is done through CI/CD on github actions. here are some screenshots of my SPA.cs and Startup.cs

JasonPan - MSFT 4,281 Microsoft Vendor

Hi @Mendenzon Tatis Rosario,

Could you kindly check below setting in .csproj file ? It's for Angular project, it should be same in SPA project.

And we also need to enable staticfile middlewares like below.

            app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
                Path.Combine(app.Environment.ContentRootPath, "ClientApp", "dist")),
                RequestPath = ""
            });

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <SpaProxyServerUrl>https://localhost:44440</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="7.0.3" />
  </ItemGroup>
  <!-- ==============> add code here to include client\dist folder -->
  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />

    <Content Include="ClientApp\dist\**">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>
  </ItemGroup>

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --configuration production" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

After doing these, you can publish it to folder, and check if the contents like below or not ?

enter image description here

Best Regards

Jason

Mendenzon Tatis Rosario 20 Reputation points

2024-03-20T08:10:57.33+00:00
@JasonPan - MSFT

Thank you so much!!

The solution was to add the code below to the csproj.

<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
JasonPan - MSFT 4,281 Reputation points Microsoft Vendor

2024-03-20T08:19:45.48+00:00

Dear @Mendenzon Tatis Rosario,

Glad to hear you can fix the issue by yourself. Do you mind me summarize all the comments as answer below? It might be useful for other forum users.

Best Regards

Jason
brtrach-MSFT 15,251 Reputation points Microsoft Employee

2024-03-22T00:13:46.0933333+00:00

@Mendenzon Tatis Rosario Can you please consider accepting Jason's answer below? This will help the community locate the answer quicker, improve search engine ranking, and let our leadership know you were able to resolve this matter. Thank you for your consideration.

Accepted answer

JasonPan - MSFT 4,281 Reputation points Microsoft Vendor

2024-03-20T08:28:09.8433333+00:00
Hi @Mendenzon Tatis Rosario,

For SPA projects, usually the front-end project is Angular/React/Vue, and the back-end project is ASP.NET Core API.

Therefore, in the ASP.NET Core API, you need to use app.UseSpa or UseStaticFiles to allow static resource files to be read, and then the front-end project of the SPA needs to be included in the compilation process. This ensures that the index.html file can be found using useFallBack as an entry.

Sample settings

<ItemGroup>  <Content Remove="$(SpaRoot)**" /> <None Remove="$(SpaRoot)**" /> <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" /> <Content Include="ClientApp\dist\**"> <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory> </Content> </ItemGroup>

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
Please sign in to rate this answer.

1 person found this answer helpful.

0 comments No comments
Sign in to comment

InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request. Your application is running in Production mode, so make sure it has been publ

0 additional answers