Configure Blazor Wasm after publishing moduled project. #10010

29 Answer(s)

• 

  0

  AI-Bot created 15 days ago

  Support Team ABP Agent

  To change the configuration (such as API URLs) of an ABP Blazor WebAssembly application after publishing—especially in a Docker or cloud environment—you should use environment-specific configuration files that can be overridden at runtime.

  Key Solution Steps:

  1. Use environment-specific JSON files:

     • Place appsettings.{ENVIRONMENT}.json (e.g., appsettings.Production.json) in the wwwroot folder of your Blazor WASM project.
     • At runtime, the Blazor app will fetch the appropriate configuration file based on the environment.

  2. Override configuration at runtime:

     • In Docker or Kubernetes, mount a volume or use a ConfigMap/Secret to provide the correct appsettings.{ENVIRONMENT}.json file at container startup.
     • This allows you to change URLs and other settings without rebuilding the image.

  3. Static file serving order:

     • Ensure app.UseStaticFiles() is called before app.MapAbpStaticAssets() in your host project’s Program.cs or Startup.cs.
     • Example:

  app.UseStaticFiles();
       app.MapAbpStaticAssets();
  

  4. Disable Blazor compression if needed:
     • If you need to disable compression for easier file replacement, add the following to your .csproj:

  <BlazorEnableCompression>false</BlazorEnableCompression>
  

  • This ensures files like appsettings.json are not compressed and can be replaced or read as plain text.

  5. UseStaticFilesForPatterns:
     • If you want to serve only specific files, you can use:

  app.UseStaticFilesForPatterns("appsettings*.json");
  

  6. Reload configuration:
     • Blazor WASM reads configuration at startup. If you replace the config file, you must reload the app in the browser to pick up changes.

  Summary:
  For Dockerized or cloud deployments, provide the correct appsettings.{ENVIRONMENT}.json at runtime via volume mounts or similar mechanisms. Ensure static files are served correctly and compression is disabled if you need to override files after publishing.

  Sources:

  • Deployment microservices solution in K8S public cloud
  • ABP Documentation: Configuration
  • ABP Documentation: Blazor WASM Deployment

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  samirmustafayev created 15 days ago

  It did not solve the problem.

  Save Cancel
• 

  0

  maliming created 15 days ago

  Support Team Fullstack Developer

  hi

  Please share your startup module code?

  The correct middleware code/order should be:

  app.UseRouting();
  var configuration = context.GetConfiguration();
  if (Convert.ToBoolean(configuration["AuthServer:IsOnK8s"]))
  {
      app.Use(async (context, next) =>
      {
          if (context.Request.Path.Value != null &&
              context.Request.Path.Value.StartsWith("/appsettings", StringComparison.OrdinalIgnoreCase) &&
              context.Request.Path.Value.EndsWith(".json", StringComparison.OrdinalIgnoreCase))
          {
              // Set endpoint to null so the static files middleware will handle the request.
              context.SetEndpoint(null);
          }
          await next(context);
      });
  
      app.UseStaticFilesForPatterns("appsettings*.json");
  }
  
  app.MapAbpStaticAssets();
  

  Thanks.

  Save Cancel
• 

  0

  samirmustafayev created 14 days ago

  hi, I tried you suggestion but without if.It still did not worked.

  Below is Blazor Module ▼

  public override void OnApplicationInitialization(ApplicationInitializationContext context)
  {
      var env = context.GetEnvironment();
      var app = context.GetApplicationBuilder();
  
      // Configure the HTTP request pipeline.
      if (env.IsDevelopment())
      {
          app.UseWebAssemblyDebugging();
      }
      else
      {
          // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
          app.UseHsts();
      }
  
      app.UseHttpsRedirection();
      app.UseRouting();
      app.Use(async (context, next) =>
      {
          if (context.Request.Path.Value != null &&
              context.Request.Path.Value.StartsWith("/appsettings", StringComparison.OrdinalIgnoreCase) &&
              context.Request.Path.Value.EndsWith(".json", StringComparison.OrdinalIgnoreCase))
          {
              // Set endpoint to null so the static files middleware will handle the request.
              context.SetEndpoint(null);
          }
          await next(context);
      });
  
      app.UseStaticFilesForPatterns("appsettings*.json");
  
      app.MapAbpStaticAssets();
      app.UseAntiforgery();
  
      app.UseConfiguredEndpoints(builder =>
      {
          builder.MapRazorComponents<App>()
              .AddInteractiveWebAssemblyRenderMode()
              .AddAdditionalAssemblies(WebAppAdditionalAssembliesHelper.GetAssemblies<BillingBlazorClientModule>());
      });
  }
  

  Save Cancel
• 

  0

  maliming created 14 days ago

  Support Team Fullstack Developer

  hi

  Can you output some logs when context.SetEndpoint(null);? Make sure the Endpoint is null for appsettings.json request.

  // Set endpoint to null so the static files middleware will handle the request.
  context.SetEndpoint(null);
  

  ---

  Or can you try that?

  public override void OnApplicationInitialization(ApplicationInitializationContext context)
  {
      var env = context.GetEnvironment();
      var app = context.GetApplicationBuilder();
  
      // Configure the HTTP request pipeline.
      if (env.IsDevelopment())
      {
          app.UseWebAssemblyDebugging();
      }
      else
      {
          // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
          app.UseHsts();
      }
  
      app.UseHttpsRedirection();
      app.UseStaticFiles();
      app.UseRouting();
      app.UseAntiforgery();
  
      app.UseConfiguredEndpoints(builder =>
      {
          builder.MapRazorComponents<App>()
              .AddInteractiveWebAssemblyRenderMode()
              .AddAdditionalAssemblies(WebAppAdditionalAssembliesHelper.GetAssemblies<BillingBlazorClientModule>());
      });
  }
  

  Thanks.

  Save Cancel
• 

  0

  samirmustafayev created 12 days ago

  Hi, by debugging it context.GetEndpoint(null) works, but still same issue with the url configuration from docker-compose. ↓ is before Endpoint setted to null

  and ↓ is the after Endpoint is null

  Save Cancel
• 

  0

  samirmustafayev created 12 days ago

  Added image od Endpoint insides

  Save Cancel
• 

  0

  maliming created 12 days ago

  Support Team Fullstack Developer

  hi

  Can you try that?

  UseStaticFiles without MapAbpStaticAssets

  

  Save Cancel
• 

  0

  samirmustafayev created 12 days ago

  I tried still same result. Also removed volumes and on creating image used --no-cache. It always works on url that was configured before docker build.

  Save Cancel
• 

  0

  maliming created 12 days ago

  Support Team Fullstack Developer

  hi

  The Blazor wasm appsettings.json file is under the wwwroot folder. Have you changed the correct file?

  Thanks.

  Save Cancel
• 

  0

  samirmustafayev created 12 days ago

  Yes, by mounting volumes: - ./appsettings.json:/app/wwwroot/appsettings.json

  Save Cancel
• 

  0

  maliming created 12 days ago

  Support Team Fullstack Developer

  hi

  Can you enter the container and use less or vim command to check the file content?

  Thanks.

  Save Cancel
• 

  0

  samirmustafayev created 12 days ago

  I am using Docker Desktop and appsettings context is this before change which is working

  and after i changed which is not working

  

  even in the browser there is nothing happening no networks no console errors or logs

  Save Cancel
• 

  0

  maliming created 12 days ago

  Support Team Fullstack Developer

  hi

  Can you share a demo project?

  I will check it in my local Docker Desktop

  liming.ma@volosoft.com

  Thanks

  Save Cancel
• 

  0

  samirmustafayev created 12 days ago

  I have an Internet issue, so may i ask you to create project in AbpStudio for criterias like :

  1. Application(layerd)
  2. BlazorWevAssembly
  3. EntityFramework
  4. PostgreSQL
  5. Enable Multi-Tenancy
  6. Add public website
  7. Solution structure: Tiered true
  8. Kubernetes false
  9. Set up as a modular solution

  Then create images and in directory ./etc/docker-compose in appsettings.json file change url for blazor , then update docker-compose file with the same url where it used in relations like db-migrator, api, auth and set port of blazor service to 80

  Save Cancel
• 

  0

  maliming created 12 days ago

  Support Team Fullstack Developer

  hi

  The final question is: In Docker, when you change the appsettings.json under wwwroot for Blazor WASM, the browser can't get the latest changes, right?

  Thanks.

  Save Cancel
• 

  0

  samirmustafayev created 12 days ago

  Yes, thats right.

  Save Cancel
• 

  0

  maliming created 12 days ago

  Support Team Fullstack Developer

  ok, I will test it in Docker.

  Thanks.

  Save Cancel
• 

  0

  samirmustafayev created 12 days ago

  Thanks, will wait for your responce.

  Save Cancel
• 

  0

  maliming created 12 days ago

  Support Team Fullstack Developer

  ok, I will test it asap.

  Thanks.

  Save Cancel
• 

  0

  maliming created 11 days ago

  Support Team Fullstack Developer

  hi

  It works on my side.

  

  public override void OnApplicationInitialization(ApplicationInitializationContext context)
  {
      var env = context.GetEnvironment();
      var app = context.GetApplicationBuilder();
  
      // Configure the HTTP request pipeline.
      if (env.IsDevelopment())
      {
          app.UseWebAssemblyDebugging();
      }
      else
      {
          // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
          app.UseHsts();
      }
  
      app.UseHttpsRedirection();
      app.UseRouting();
      
      app.Use(async (context, next) =>
      {
          if (context.Request.Path.Value != null &&
              context.Request.Path.Value.StartsWith("/appsettings", StringComparison.OrdinalIgnoreCase) &&
              context.Request.Path.Value.EndsWith(".json", StringComparison.OrdinalIgnoreCase))
          {
              // Set endpoint to null so the static files middleware will handle the request.
              context.SetEndpoint(null);
          }
          await next(context);
      });
  
      app.UseStaticFilesForPatterns("appsettings*.json");
  
      app.MapAbpStaticAssets();
      app.UseAntiforgery();
  
      app.UseConfiguredEndpoints(builder =>
      {
          builder.MapRazorComponents<App>()
              .AddInteractiveWebAssemblyRenderMode()
              .AddAdditionalAssemblies(WebAppAdditionalAssembliesHelper.GetAssemblies<AbpSolution6BlazorClientModule>());
      });
  }
  

  services:
    abpsolution6-blazor:
      image: abpsolution6-blazor:latest
      container_name: abpsolution6-blazor
      build:
        context: ../../
        dockerfile: src/AbpSolution6.Blazor/Dockerfile.local
      environment:
        - ASPNETCORE_URLS=https://+:8081;
        - Kestrel__Certificates__Default__Path=/app/certs/localhost.pfx
        - Kestrel__Certificates__Default__Password=d55cb215-fa18-408d-80c9-e21ca6061c84
      ports:
        - "44336:8081"
      depends_on:
        - abpsolution6-api
      restart: on-failure
      volumes:
        - ./appsettings.json:/app/wwwroot/appsettings.json
        - ./certs:/app/certs
      networks:
        - abp-network
  
    abpsolution6-api:
      image: abpsolution6-api:latest
      container_name: abpsolution6-api
      hostname: abpsolution6-api
      build:
        context: ../../
        dockerfile: src/AbpSolution6.HttpApi.Host/Dockerfile.local
      environment:
        - ASPNETCORE_URLS=https://+:8081;
        - Kestrel__Certificates__Default__Path=/app/certs/localhost.pfx
        - Kestrel__Certificates__Default__Password=d55cb215-fa18-408d-80c9-e21ca6061c84
        - App__SelfUrl=https://localhost:44349
        - App__CorsOrigins=http://localhost:44336
        - App__HealthCheckUrl=http://abpsolution6-api:8080/health-status
        - AuthServer__RequireHttpsMetadata=false
        - AuthServer__Authority=https://localhost:44366
        - ConnectionStrings__Default=Data Source=sql-server;Initial Catalog=AbpSolution6;User Id=sa;Password=myPassw0rd;MultipleActiveResultSets=true;TrustServerCertificate=True;
      ports:
        - "44366:8081"
      depends_on:
        sql-server:
          condition: service_healthy
      restart: on-failure    
      volumes:
        - ./certs:/app/certs
      networks:
        - abp-network
    
  
  
    db-migrator:
      image: abpsolution6-db-migrator:latest
      container_name: db-migrator
      build:
        context: ../../
        dockerfile: src/AbpSolution6.DbMigrator/Dockerfile.local
      environment:
        - OpenIddict__Applications__AbpSolution6_Blazor__RootUrl=http://localhost:44336
        - ConnectionStrings__Default=Data Source=sql-server;Initial Catalog=AbpSolution6;User Id=sa;Password=myPassw0rd;MultipleActiveResultSets=true;TrustServerCertificate=True;
      restart: on-failure
      depends_on:
        sql-server:
          condition: service_healthy
      networks:
        - abp-network    
    
    sql-server:
      container_name: sql-server
      image: mcr.microsoft.com/azure-sql-edge:1.0.7
      ports:
        - "1434:1433"
      environment:
        SA_PASSWORD: "myPassw0rd"
        ACCEPT_EULA: "Y"
      volumes:
        - sqldata:/var/opt/mssql
      networks:
        - abp-network
      healthcheck:
        test: /opt/mssql-tools/bin/sqlcmd -S sql-server -U sa -P "myPassw0rd" -Q "SELECT 1" -C -b -o /dev/null
        interval: 10s
        timeout: 3s
        retries: 10
        start_period: 10s
  
  volumes:
    sqldata:
      name: abpsolution6_sqldata
  networks:
    abp-network:
      name: abpsolution6-network
      driver: bridge
  

  Save Cancel
• 

  0

  samirmustafayev created 11 days ago

  Hi, yes it is working. It overriding it. Try to change localhost to random url. In api it works, but in blazor it does not work. Thanks.

  Save Cancel
• 

  0

  maliming created 11 days ago

  Support Team Fullstack Developer

  hi

  Do you mean this?

  

  Save Cancel
• 

  0

  samirmustafayev created 11 days ago

  No, I ment url not port

  {
    "App": {
      "SelfUrl": "http://test.company:44336"
    },
    "AuthServer": {
      "Authority": "https://localhost:44376",
      "ClientId": "Billing_Blazor",
      "ResponseType": "code"
    },
    "RemoteServices": {
      "Default": {
        "BaseUrl": "https://localhost:44317"
      },
      "AbpAccountPublic": {
        "BaseUrl": "https://localhost:44376"
      }
    }
  }
  

  Save Cancel
• 

  0

  maliming created 11 days ago

  Support Team Fullstack Developer

  Also works

  

  Save Cancel