1

I have searched all offical documentation, I could not find the anything about how could I host the Blazor Webassembly in S3/CDN with environment specific value.

You can imagine that the app would have 3 different environments Development, Test, Production. Each environment would have their own environment specific value. e.g. api url, client id, api key.

If I host the Blazor Webassembly app in IIS, I could put the environment specific value in appSetting.{environment}.json, and then I could set up the value of "ASPNETCORE_ENVIRONMENT" in web.config to specify the app's environment.

But How can we do it in S3 and CDN?

user2376512
  • 885
  • 1
  • 10
  • 21
  • This may solve your issue: https://stackoverflow.com/a/47648283/14033548 – Brian Parker Oct 26 '20 at 20:43
  • @BrianParker thx, if you were hosting blazor server app, it would be working fine. But now, the issue is in blazor client app, it does not have any backend server side code after you published, it would not load any backend config, it is just like a static page – user2376512 Oct 26 '20 at 21:50
  • wasm client can have its own appsettings.json in the wwwroot folder. – Brian Parker Oct 26 '20 at 21:57
  • @BrianParker But how wasm client app can read environment specific appsettings.{environment}.json in S3? You could not set environment as IIS. – user2376512 Oct 27 '20 at 00:32

2 Answers2

0

If there is a way to specify custom headers in the requests you can tell blazor wasm what environment it is running in by sending a "blazor-environment" header with the name of the environment you are expecting. This article explains the use of blazor-environment:

https://learn.microsoft.com/en-gb/aspnet/core/blazor/fundamentals/environments?view=aspnetcore-3.1

Not sure how to set the custom headers in S3 ... perhaps you need to use Cloud Front in conjunction with S3 to achieve that, sorry I wasn't able to fully answer the question.

G. Zidar
  • 195
  • 2
  • 8
0

We were faced with the same issue, and we solved it using CloudFront and their "new" CloudFront Functions. The CloudFront distribution sources from S3.

This works based on using the response header approach documented here: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/environments?view=aspnetcore-5.0#set-the-environment-via-header

I created the following function, and then applied it to the CloudFront distribution using the Viewer Response event:

function handler(event) {
  var response = event.response;
  var headers = response.headers;

  headers['blazor-environment'] = { value: 'Staging' };

  return response;
}

In our case, we use a different AWS account for each environment, so we just create the same function under the same name in each environment, and then just change the 'QA' to whatever environment we want. You could also easily create multiple functions for various environments, and just apply the appropriate one to each CloudFront Distribution.

Nathan A
  • 11,059
  • 4
  • 47
  • 63