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
– afnpires, Commented Nov 12, 2017 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
– Dmitrij Polyanin, Commented Nov 12, 2017 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
– Dmitrij Polyanin, Commented Nov 12, 2017 at 11:54

Dmitrij Polyanin · Accepted Answer · 2017-11-13 13:16:20Z

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, 2017 at 13:16

answered Nov 12, 2017 at 11:52

Dmitrij Polyanin

5056 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mostafa Over a year ago

could you please explain a bit how did you add the functionality for getting the appsettings value?

Dmitrij Polyanin Over a year ago

@Mostafa You can look here - stackoverflow.com/questions/10766654/…

Jari Turkia Over a year ago

Are you using UseSpa()? I am, and index.html is hard-coded. No .Net-side rendering can be done.

Dmitrij Polyanin Over a year ago

@JariTurkia the other way is to override settings.js file when application start and to ref it in index.html .

Dmitrij Polyanin Over a year ago

And one more way is to fetch seetings from controller on the fly

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 4, 2019 at 13:43

Dmitrij Polyanin

5056 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

One.

Two.

Three.

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

One.

Two.

Three.

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related