How to push configuration values from Asp.Net Core MVC 2.0 config file to React TypeScript client script?

Question

I have an application on ASP.NET MVC Core 2.0 using React Template. I have propertie in config file on server side - SiteURL. I need to push it to client TypeScript, and don`t understand how can I make it?

I tried to push them throw Home/Index file by placing in the last script

SiteProps.SiteURL= "http://mysiteurl.org"

and on client I make

export var SiteProps: { SiteURL: string } = {SiteURL: ""};

and import this file on boot

But testing this property on console I see

Uncaught ReferenceError: SiteProps is not defined

I think that JavaScript did't see my propertie from TypeScript context.

The question is how to make this code work, and what is the best practice to push const values (properties) to client TypeScript code.

If you are Server Side Rendering or app you could pass it as a prop to the main component, otherwise, if no SSR is being made you'll have to hard code it in the front-end code. Another approach could be using your webpack configuration to read the web.config and create a variable with the value. — afnpires, Nov 12 '17 at 11:23
On server renders only Home/Index and i can not push values directly to main component from C#, and it builds on TypeScript compiler and webpack to complete js script, so i can't pass value using razor, as i think. Hardcode on client is varian but Last variant, because i don`t like two places of identical config. Webpack aproach is interesting, but How? — Dmitrij Polyanin, Nov 12 '17 at 11:49
And i found one way. not so hard to make what I need. Using `div` and `json`, see my answer. But loooking other ways. — Dmitrij Polyanin, Nov 12 '17 at 11:54

Dmitrij Polyanin · Answer 1 · 2017-11-13T13:16:20.950

3

I found solution to make this line on Home/Index:

<div id="site-props" style="display: none;">@ViewBag.PropsJSON</div>

Where PropsJSON is JSON string of my configuration. After it i initialize my clientscript configuration using this code:

function ImportProps() {
    var ell = document.getElementById('site-props');
    var jsontext = ell!.innerText;
    SiteProps = JSON.parse(jsontext);
}

edited Nov 13 '17 at 13:16

answered Nov 12 '17 at 11:52

Dmitrij Polyanin

485
5
23

could you please explain a bit how did you add the functionality for getting the appsettings value? – Mostafa Jun 13 '18 at 01:41
@Mostafa You can look here - https://stackoverflow.com/questions/10766654/appsettings-get-value-from-config-file – Dmitrij Polyanin Jun 13 '18 at 07:55
1

Are you using `UseSpa()`? I am, and `index.html` is hard-coded. No .Net-side rendering can be done. – Jari Turkia Oct 09 '18 at 10:49
@JariTurkia the other way is to override settings.js file when application start and to ref it in index.html . – Dmitrij Polyanin Mar 04 '19 at 13:29
And one more way is to fetch seetings from controller on the fly – Dmitrij Polyanin Mar 04 '19 at 13:31
And more one. From TS set `window.settings` and then to use it from any place. – Dmitrij Polyanin Mar 04 '19 at 13:32

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Some more ways how to solve it.

One.

When application starts to rewrite file "mysetting.js" with actual settings and to ref this file in index.html

mysetting.js

var settings = {
  SiteName: "MySite",
  SiteApi: "http://site.api"
}

index.html

<script src="mysetting.js"></script>

Two.

In Home/Index set window.settings in script block

window.settings = {
  SiteName: "MySite",
  SiteApi: "http://site.api"
}

and it should be available from all code.

Three.

After client application starts get all settings with fetch request from server on the fly, and get result as JSON object, and set it somewhere to static.

fetch("api/Settings/getSettings").
   then( /* set data to static */ )

Where you initialize your client code.

How to push configuration values from Asp.Net Core MVC 2.0 config file to React TypeScript client script?

2 Answers2

One.

Two.

Three.

Linked