.Net Core 2.1 - Read appsettings.json in javascript file

Question

I have a Web application in .net Core 2.1 using signalR. I need to pass HubUrl into custom javascript file. Is that possible in .net Core?

Sample of js code:

const connection = new signalR.HubConnectionBuilder()
.withUrl('http://localhost:5000/hub') //Here I need to read appSettings.json to get value from there
.configureLogging(signalR.LogLevel.Information)
.build();

Answer 1

appsettings.json located on server. So you need to add end-point to controller that returns needed value.

Controller:

public class MyController:Controller{
    private readonly IConfiguration configuration;

    public MyController(IConfiguration configuration){
         this.configuration = configuration;
    }

    [HTTPGet]
    public ActionResult GetConfigurationValue(string sectionName, string paramName){
        var parameterValue= configuration[$"{sectionName}:{paramName}"];
        return Json(new { parameter= parameterValue});
    }
}

Client side:

$.ajax({
    type:"GET",
    url: "/MyController/GetConfigurationValue"
    data:{
        sectionName = "MySection",
        paramName = "MyParameter"
    }
}).done(
    function(parameterValue){
        //do what you need
});

In appsettings.json:

{
    "MySection":{
        "MyParameter":"value that I want to get"
    }
}

Answer 2

In appsettings.json

"ApiUrls": {
    "commonUrl": "https://localhost:44348/api/"    
  }

In _Layout.cshtml

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<script>      
        const commonUrl = @Json.Serialize(@Configuration.GetSection("ApiUrls").GetSection("commonUrl").Value)
</script>

now this will be like a global variable accessible to all js files

Answer 3

A very safe yet flexible way to do this is to expose the URL inside a <script> block in a view. That way, you are not exposing application configuration (which access you will have to protect very well) but instead just explicitly expose a single secure value.

It also has the added benefit that you do not need to make a request to an endpoint (which address you actually also need to know in your script) but have the value instantly there when you need it.

To do that, you can simply render a <script> tag that defines the value globally. For example, you could have the following in your layout:

<script>
window._signalRAddress = @Json.Serialize(ViewData["SignalRAddress"]);
</script>
<script src="~/your-custom-script.js"></script>

And then you just use window._signalRAddress inside of your script.

Answer 4

In an SPA with webpack, you can just import the appsettings.json and make it available via a convenience class that you import;

e.g.

appsettings.js:

appsettingsjson = process.env.NODE_ENV === 'development'
    ? require('./appsettings.Development.json')
    : require('./appsettings.json');

class AppConfig {

    constructor() {
    }

    static Settings() {
        return appsettingsjson;
    }
}

module.exports = AppConfig;

Then wherever you need it, just import and use. e.g.:

const AppConfig = require("./appsettings");
console.log(AppConfig.Settings().YourSection.YourParameter)

Answer 5

respecting "Maxemelian"'s answer, extending answer by adding validation cases to check

1. If section name is null
2. Ignoring secret

private readonly IConfiguration configuration;

public MyController(IConfiguration configuration){
     this.configuration = configuration;
}

[HttpGet("[action]")]
public ActionResult GetConfigurationValue(string sectionName, string paramName)
{
    if (paramName.ToLower().Contains("secret")) {
        return null;
    }

    var parameterValue = (!string.IsNullOrEmpty(sectionName)) ? config[$"{sectionName}:{paramName}"] : config[$"{paramName}"];
    return Json(new { parameter = parameterValue });
}