Caching problems after deployment

Radzen Studio Angular
1

We deploy our dev version on a regular basis and realized we have caching issues on a regular basis.
The code in the index.html wants to load an old main.'someOldIdentifier'.bundle.js
Telling your browser to do a fresh reload solves the problem but seems like a workaround because we would have to this problem on every update.

Do you know a way how to circumvent that problem?
Maybe adding some http-response-headers like cache-control to the index.html?
Shouldn't that be something to default to anyway?

2

While creating a new angular project in Visual Studio the provided Startup.cs includes

app.UseSpaStaticFiles();

just below

app.UseStaticFiles();

That could probably solve this problem too.

3

I don't think UseSpaStaticFiles would add any caching headers considering its implementation. We do not add any HTTP headers on purpose as this is what Microsoft's default templates are doing by default. There isn't any default that is generic enough to serve all applications. You can add custom HTTP headers from IIS.

4

How would that be done with ASP.NET Core? We do not use an IIS server.

5

How do you deploy your applications then?

6

We deploy through docker, that's our dockerfile:

FROM node:8.15 as ngbuild

WORKDIR /code

COPY client/ ./

RUN npm ci

RUN ./node_modules/.bin/ng build --output-path /app --prod

FROM microsoft/dotnet:2.2-aspnetcore-runtime AS netbase

WORKDIR /app

EXPOSE 80

FROM microsoft/dotnet:2.2-sdk AS netbuild

WORKDIR /src

COPY server server/

WORKDIR /src/server

RUN dotnet build project.csproj -c Release -o /app

RUN dotnet publish project.csproj -c Release -o /app

FROM netbase AS final

WORKDIR /app

COPY --from=netbuild /app .

COPY --from=ngbuild /app wwwroot/

# trailing slash is important! ("http://host.docker.local/")

ENV WEBSERVER=

CMD if [ -z "$WEBSERVER" ]; then echo "Need to set WEBSERVER environment variable (with trailing slash)"; exit 1; fi && \

sed "s#__WEBSERVER__#$WEBSERVER#g" -i /app/wwwroot/main.*.bundle.js && \

dotnet server.dll

#ENTRYPOINT ["dotnet", "server.dll"]
7

Is that docker behind a reverse proxy (nginx, Apache etc)? You may have to dig into the ASP.NET Core documentation for static file caching options. I found this but haven't tested it.

We are using nginx as a reverse proxy in all Radzen demo applications. This allows us a lot of control without adding extra code.

1 Like
8

No proxy, but your hint to the documentation helped.
After creating a Startup.Custom.cs it was possible to add just the index.html which should never be cached.

using System;
using Manager.Helper;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Net.Http.Headers;

namespace Manager
{
  public partial class Startup
  {
    partial void OnConfigureServices(IServiceCollection services)
    {
      services.AddTransient<DataHelper>();
      services.Configure<StaticFileOptions>(opts =>
      {
        opts.OnPrepareResponse = context =>
        {
          if (context.File.Name == "index.html")
          {
            context.Context.Response.GetTypedHeaders().CacheControl = new CacheControlHeaderValue
            {
              // Cache-Control:private,no-store,max-age=0,no-cache,must-revalidate
              Private = true,
              NoStore = true,
              MaxAge = TimeSpan.Zero,
              NoCache = true,
              MustRevalidate = true
            };
          }
        };
      });
    }
  }
}