<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en-GB">
	<id>https://wiki.socialstack.dev/index.php?action=history&amp;feed=atom&amp;title=Configuration</id>
	<title>Configuration - Revision history</title>
	<link rel="self" type="application/atom+xml" href="https://wiki.socialstack.dev/index.php?action=history&amp;feed=atom&amp;title=Configuration"/>
	<link rel="alternate" type="text/html" href="https://wiki.socialstack.dev/index.php?title=Configuration&amp;action=history"/>
	<updated>2026-10-16T08:09:01Z</updated>
	<subtitle>Revision history for this page on the wiki</subtitle>
	<generator>MediaWiki 1.36.2</generator>
	<entry>
		<id>https://wiki.socialstack.dev/index.php?title=Configuration&amp;diff=305&amp;oldid=prev</id>
		<title>Luke: /* Using configuration from javascript */</title>
		<link rel="alternate" type="text/html" href="https://wiki.socialstack.dev/index.php?title=Configuration&amp;diff=305&amp;oldid=prev"/>
		<updated>2022-09-13T14:50:45Z</updated>

		<summary type="html">&lt;p&gt;&lt;span dir=&quot;auto&quot;&gt;&lt;span class=&quot;autocomment&quot;&gt;Using configuration from javascript&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;table style=&quot;background-color: #fff; color: #202122;&quot; data-mw=&quot;interface&quot;&gt;
				&lt;col class=&quot;diff-marker&quot; /&gt;
				&lt;col class=&quot;diff-content&quot; /&gt;
				&lt;col class=&quot;diff-marker&quot; /&gt;
				&lt;col class=&quot;diff-content&quot; /&gt;
				&lt;tr class=&quot;diff-title&quot; lang=&quot;en-GB&quot;&gt;
				&lt;td colspan=&quot;2&quot; style=&quot;background-color: #fff; color: #202122; text-align: center;&quot;&gt;← Older revision&lt;/td&gt;
				&lt;td colspan=&quot;2&quot; style=&quot;background-color: #fff; color: #202122; text-align: center;&quot;&gt;Revision as of 14:50, 13 September 2022&lt;/td&gt;
				&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot; id=&quot;mw-diff-left-l66&quot;&gt;Line 66:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 66:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;= Using configuration from javascript =&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;= Using configuration from javascript =&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br/&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;If you mark config with the [Frontend] attribute, you&amp;#039;ll be able to use it from your js. As always, be careful what you expose. Note that to essentially &amp;quot;register&amp;quot; that the config even exists, you do need to call GetConfig at least once. Typically a small service is made which has the job of loading/ providing your frontend config - it has the added side effect of other services in the API being able to access your config if they need it as well anyway.&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;+&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;If you mark config with the [Frontend] attribute, you&amp;#039;ll be able to use it from your js. As always, be careful what you expose. Note that to essentially &amp;quot;register&amp;quot; that the config even exists, you do need to call GetConfig &lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;(inside a service, see above) &lt;/ins&gt;at least once. Typically a small service is made which has the job of loading/ providing your frontend config - it has the added side effect of other services in the API being able to access your config if they need it as well anyway.&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br/&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Once your config is setup and ready, the useConfig js function is able to access it:&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Once your config is setup and ready, the useConfig js function is able to access it:&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</summary>
		<author><name>Luke</name></author>
	</entry>
	<entry>
		<id>https://wiki.socialstack.dev/index.php?title=Configuration&amp;diff=304&amp;oldid=prev</id>
		<title>Luke: Created page with &quot;Every service inside a SocialStack API can have its own automatically managed configuration. Assuming you have created a service (either an entity or just a basic...&quot;</title>
		<link rel="alternate" type="text/html" href="https://wiki.socialstack.dev/index.php?title=Configuration&amp;diff=304&amp;oldid=prev"/>
		<updated>2022-09-13T14:49:46Z</updated>

		<summary type="html">&lt;p&gt;Created page with &amp;quot;Every service inside a SocialStack API can have its own automatically managed configuration. Assuming you have &lt;a href=&quot;/index.php?title=Services&quot; title=&quot;Services&quot;&gt;created a service&lt;/a&gt; (either an entity or just a basic...&amp;quot;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;New page&lt;/b&gt;&lt;/p&gt;&lt;div&gt;Every service inside a SocialStack API can have its own automatically managed configuration. Assuming you have [[Services|created a service]] (either an entity or just a basic service) then you&amp;#039;ll be able to start using configuration.&lt;br /&gt;
&lt;br /&gt;
= Defining a configuration class =&lt;br /&gt;
&lt;br /&gt;
Configuration classes must just inherit from Config and use properties which can be JSON serialised like so:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;syntaxhighlight lang=&amp;quot;csharp&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
using Api.Configuration;&lt;br /&gt;
&lt;br /&gt;
public class OAuthConfig : Config&lt;br /&gt;
{&lt;br /&gt;
    public string Key {get; set;}&lt;br /&gt;
&lt;br /&gt;
    [Frontend]&lt;br /&gt;
    public string PublicKey {get; set;}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The name of the class doesn&amp;#039;t matter, but typically it is named after the service that uses it like UserService may have &amp;quot;UserConfig.cs&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
= The frontend attribute =&lt;br /&gt;
&lt;br /&gt;
Optionally add [Frontend] to individual properties or your whole class to note that the configured value should be sent to the frontend javascript. It can be used via useConfig (see below).&lt;br /&gt;
&lt;br /&gt;
= Setting config values =&lt;br /&gt;
&lt;br /&gt;
By calling GetConfig at least once (see below), Socialstack will first check if config exists in your database, specifically the configuration table. It will look for a config entry with a key that matches the name of your configuration class minus the word &amp;quot;Config&amp;quot; or &amp;quot;Configuration&amp;quot; if it ended with either:&lt;br /&gt;
&lt;br /&gt;
* OAuthConfig -&amp;gt; will search for a key of &amp;quot;OAuth&amp;quot; in your configuration database table&lt;br /&gt;
* UserConfig -&amp;gt; will search for a key of &amp;quot;User&amp;quot; in your configuration database table&lt;br /&gt;
&lt;br /&gt;
If it does not exist in the database, it will check if it exists in the appsettings file(s) by searching for the same key. If that doesn&amp;#039;t exist either, a new database row will be created automatically.&lt;br /&gt;
&lt;br /&gt;
The easiest way to edit your configuration is via the administration panel in the configuration section.&lt;br /&gt;
&lt;br /&gt;
= Using configuration from a service =&lt;br /&gt;
&lt;br /&gt;
Inside your service, you can obtain a config instance like so:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;syntaxhighlight lang=&amp;quot;csharp&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
var myConfig = GetConfig&amp;lt;MyConfigClass&amp;gt;();&lt;br /&gt;
&lt;br /&gt;
// myConfig is an instance of MyConfigClass. It is never null.&lt;br /&gt;
var key = myConfig.Key;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&lt;br /&gt;
It&amp;#039;s recommended to do this in your constructor and then keep a reference to the object as a private variable. The configuration system makes a guarantee that the object it gave you will always be kept up to date if an admin changes the config values. When this occurs, OnChange will be triggered on the object.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;syntaxhighlight lang=&amp;quot;csharp&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
// var myConfig = GetConfig&amp;lt;OAuthConfig&amp;gt;();&lt;br /&gt;
&lt;br /&gt;
myConfig.OnChange += () =&amp;gt; {&lt;br /&gt;
    // Calculate some complex/ derived configuration value here. Optionally can mark it async and await too.&lt;br /&gt;
    &lt;br /&gt;
    // If not using async, just return a valuetask:&lt;br /&gt;
    return new ValueTask();&lt;br /&gt;
};&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/syntaxhighlight&amp;gt;&lt;br /&gt;
&lt;br /&gt;
= Using configuration from javascript =&lt;br /&gt;
&lt;br /&gt;
If you mark config with the [Frontend] attribute, you&amp;#039;ll be able to use it from your js. As always, be careful what you expose. Note that to essentially &amp;quot;register&amp;quot; that the config even exists, you do need to call GetConfig at least once. Typically a small service is made which has the job of loading/ providing your frontend config - it has the added side effect of other services in the API being able to access your config if they need it as well anyway.&lt;br /&gt;
&lt;br /&gt;
Once your config is setup and ready, the useConfig js function is able to access it:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;syntaxhighlight lang=&amp;quot;js&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
import {useConfig} from &amp;#039;UI/Session&amp;#039;;&lt;br /&gt;
&lt;br /&gt;
export default function MyComponent(props)&lt;br /&gt;
{&lt;br /&gt;
    var frontendBitsOfTheConfig = useConfig(&amp;quot;OAuth&amp;quot;);&lt;br /&gt;
    // frontendBitsOfTheConfig.publicKey is a thing, frontendBitsOfTheConfig.key is not&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/syntaxhighlight&amp;gt;&lt;/div&gt;</summary>
		<author><name>Luke</name></author>
	</entry>
</feed>