404 Error when running published blazor-wasm project

RyanMBritton · March 18, 2022, 11:43am

Hi there,

I’m having an issue after publishing a blazor-wasm project - and I’m not sure if I am missing something with regards to the ServiceStack pre-rendering, or if it is something more general that I am missing. I hope you guys can help

Steps to reproduce:

Create a new blazor-wasm project

image1406×412 17.7 KB
Open the project and build
right-click-publish the start-up folder (TestPublish in my case) and publish to a folder:

image867×633 19.1 KB

4.publish succeeds without errors:

run the published exe (TestPublish.exe in my case). No errors in console on start-up
navigating to https://localhost:5001 shows an error:

image1123×992 45.4 KB
reviewing the error console shows the following errors:

image2552×987 294 KB

image2552×192 21.8 KB
taking a look at the Networking tab in the browser’s developer tools shows the following:

image1658×667 80 KB

image1680×853 55.1 KB

any ideas on what I’m missing here?

mythz · March 18, 2022, 12:00pm

The pre-rendering tasks are performed by the included GitHub Actions, i.e. they wont be run when you publish a project, so either the Prerender Tasks will need to be run locally before publishing the project with the published package containing the content in the /prerender folder or the pre-render functionality would need to be removed from the template.

RyanMBritton · March 18, 2022, 12:04pm

to run the prerender task, I need to run the “prerender” tests, am I right?

Like this:

dotnet test --filter TestCategory=prerender --logger:&quot;console;verbosity=detailed&quot;

mythz · March 18, 2022, 12:06pm

Yep that should generate the pre-rendered pages, which would also need to be included in the bundled package

RyanMBritton · March 18, 2022, 12:32pm

makes sense - thank you

RyanMBritton · March 18, 2022, 12:41pm

ok - one last issue… if I run the pre-render tests and ensure that the “prerender” folder is copied with the output when publishing, the 404 error disappears…however - these errors still persist:

the errors do not occur when running the app from Visual Studio…

mythz · March 18, 2022, 12:50pm

This looks it’s calling its API using an incorrect host name, GitHub Actions publishes the project using the command:

github.com

NetCoreTemplates/blazor-wasm/blob/37c263fee4c7e43d5ebea58ddc3c4c486a2523af/.github/workflows/release.yml#L58


      echo "TAG_NAME=${{ github.event.release.tag_name }}" >> $GITHUB_ENV
    fi;
    if [ "${{ github.event.inputs.version }}" != "" ]; then
      echo "TAG_NAME=${{ github.event.inputs.version }}" >> $GITHUB_ENV
    fi;


# Publish .NET Project
- name: Publish dotnet project
  working-directory: ./MyApp
  run: | 
    dotnet publish -c Release /p:DEPLOY_API=${{ secrets.DEPLOY_API }} /p:DEPLOY_CDN=${{ secrets.DEPLOY_CDN }} /p:APP_TASKS=prerender


# Authenticate, build and push to GitHub Container Registry (ghcr.io)
- name: Login to GitHub Container Registry
  uses: docker/login-action@v1
  with:
    registry: ghcr.io
    username: ${{ github.repository_owner }}
    password: ${{ secrets.CR_PAT }}


# Build and push new docker image, skip for manual redeploy other than 'latest'

Which tells it what DEPLOY_API and DEPLOY_CDN to use which executes these pre-publish tasks to update the necessary host names in the different configs:

github.com

NetCoreTemplates/blazor-wasm/blob/37c263fee4c7e43d5ebea58ddc3c4c486a2523af/MyApp/MyApp.csproj#L32-L59


<!-- Populated in release.yml with GitHub Actions secrets -->
<Target Name="DeployApi" AfterTargets="Build" Condition="$(DEPLOY_API) != ''">
    <Exec Command="echo DEPLOY_API=$(DEPLOY_API)" />


    <!-- Update Production settings with DEPLOY_API Blazor UI should use  -->
    <WriteLinesToFile File="$(WwwRoot)/appsettings.Production.json" Lines="$([System.IO.File]::ReadAllText($(WwwRoot)/appsettings.Production.json).Replace('{DEPLOY_API}',$(DEPLOY_API)))" Overwrite="true" Encoding="UTF-8" />


    <!-- 404.html SPA fallback (supported by GitHub Pages, Cloudflare & Netlify CDNs) -->
    <Copy SourceFiles="$(WwwRoot)/index.html" DestinationFiles="$(WwwRoot)/404.html" />


    <!-- define /api proxy routes (supported by Cloudflare or Netlify CDNs)  -->
    <WriteLinesToFile File="$(WwwRoot)/_redirects" Lines="$([System.IO.File]::ReadAllText($(WwwRoot)/_redirects).Replace('{DEPLOY_API}',$(DEPLOY_API)))" Overwrite="true" Encoding="UTF-8" />
</Target>
<Target Name="DeployCdn" AfterTargets="Build" Condition="$(DEPLOY_CDN) != ''">
    <Exec Command="echo DEPLOY_CDN=$(DEPLOY_CDN)" />


    <!-- Define custom domain name that CDN should use -->
    <Exec Condition="$(DEPLOY_CDN) != ''" Command="echo $(DEPLOY_CDN) &gt; $(WwwRoot)/CNAME" />
</Target>

This file has been truncated. show original

If you’re not using a CDN you can omit /p:DEPLOY_CDN, but I’d execute the same publish tasks so the correct configuration is updated, otherwise you’d need to update them manually.

Or maybe it’s just that the ApiBaseUrl hasn’t been properly configured in your appsettings:

github.com

NetCoreTemplates/blazor-wasm/blob/main/MyApp.Client/Program.cs#L26


);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddOptions();
builder.Services.AddAuthorizationCore();


// Use / for local or CDN resources
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<AuthenticationStateProvider>(s => s.GetRequiredService<ServiceStackStateProvider>());


builder.Services.AddBlazorApiClient(builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress);


builder.Services.AddScoped<ServiceStackStateProvider>();


await builder.Build().RunAsync();