Merge pull request #743 from robintown/config

Improve config documentation and setup

.env.example

@@ -1,5 +1,5 @@
 ####
-# App Config
+# Build-time app config
 # Environment files are documented here:
 # https://vitejs.dev/guide/env-and-mode.html#env-files
 ####
@@ -8,12 +8,6 @@
 # VITE_DEFAULT_HOMESERVER=http://localhost:8008
 # VITE_FALLBACK_STUN_ALLOWED=false
 
-# Used for submitting debug logs to an external rageshake server
-# VITE_RAGESHAKE_SUBMIT_URL=http://localhost:9110/api/submit
-
-# The Sentry DSN to use for error reporting. Leave undefined to disable.
-# VITE_SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0
-
 # VITE_CUSTOM_THEME=true
 # VITE_THEME_ACCENT=#0dbd8b
 # VITE_THEME_ACCENT_20=#0dbd8b33

.gitignore

@@ -5,4 +5,4 @@ dist
 dist-ssr
 *.local
 .idea/
-config.json
+public/config.json

README.md

@@ -16,9 +16,10 @@ git clone https://github.com/vector-im/element-call.git
 cd element-call
 yarn
 cp .env.example .env
+cp sample.config.json public/config.json
 ```
 
-You can now edit the configuration in `.env` to your liking. The most important thing is to set `VITE_DEFAULT_HOMESERVER` to the homeserver that the app should use, such as `https://call.ems.host`.
+You can now edit the configuration in `.env` and `public/config.json` to your liking. (See the [configuration](#Configuration) section for details.) The most important thing is to set `VITE_DEFAULT_HOMESERVER` to the homeserver that the app should use, such as `https://call.ems.host`.
 
 Next, build the project:
 
@@ -59,6 +60,7 @@ cd element-call
 yarn
 yarn link matrix-js-sdk
 cp .env.example .env
+cp sample.config.json public/config.json
 ```
 
 By default, the app expects you to have [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008. If you wish to use another homeserver, you can set it in your `.env` file.
@@ -69,9 +71,9 @@ You're now ready to launch the development server:
 yarn dev
 ```
 
-## Config
+## Configuration
 
-Configuration options are documented in the `.env` file.
+There are currently two different config files. `.env` holds variables that are used at build time, while `public/config.json` holds variables that are used at runtime. Documentation and default values for `public/config.json` can be found in [ConfigOptions.ts](src/config/ConfigOptions.ts).
 
 ## Translation
 

sample.config.json

@@ -1,13 +1,5 @@
 {
-  "posthog": {
-    "api_key": "examplePosthogKey",
-    "api_host": "https://posthog.com"
-  },
-  "sentry": {
-    "environment": "main-branch",
-    "DSN": "https://examplePublicKey@o0.ingest.sentry.io/0"
-  },
   "rageshake": {
-    "submit_url": "http://localhost:9110/api/submit"
+    "submit_url": "https://element.io/bugreports/submit"
   }
 }

src/config/Config.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { DEFAULT_CONFIG, IConfigOptions } from "./ConfigOptions";
+import { DEFAULT_CONFIG, ConfigOptions, ResolvedConfigOptions } from "./ConfigOptions";
 
 export class Config {
   private static internalInstance: Config;
@@ -37,13 +37,13 @@ export class Config {
     return Config.internalInstance.initPromise;
   }
 
-  public config: IConfigOptions;
+  public config: ResolvedConfigOptions;
   private initPromise: Promise<void>;
 }
 
 async function downloadConfig(
   configJsonFilename: string
-): Promise<IConfigOptions> {
+): Promise<ConfigOptions> {
   const url = new URL(configJsonFilename, window.location.href);
   url.searchParams.set("cachebuster", Date.now().toString());
   const res = await fetch(url, {
@@ -51,14 +51,12 @@ async function downloadConfig(
     method: "GET",
   });
 
-  if (res.status === 404 || res.status === 0) {
+  if (!res.ok || res.status === 404 || res.status === 0) {
     // Lack of a config isn't an error, we should just use the defaults.
     // Also treat a blank config as no config, assuming the status code is 0, because we don't get 404s from file:
     // URIs so this is the only way we can not fail if the file doesn't exist when loading from a file:// URI.
-    return {} as IConfigOptions;
+    return {};
   }
 
-  if (res.ok) {
-    return res.json();
-  }
+  return res.json();
 }

src/config/ConfigOptions.ts

@@ -1,18 +1,37 @@
-export interface IConfigOptions {
+export interface ConfigOptions {
+  /**
+   * The Posthog endpoint to which analytics data will be sent.
+   */
   posthog?: {
     api_key: string;
     api_host: string;
   };
+  /**
+   * The Sentry endpoint to which crash data will be sent.
+   */
   sentry?: {
     DSN: string;
     environment: string;
   };
+  /**
+   * The rageshake server to which feedback and debug logs will be sent.
+   */
   rageshake?: {
     submit_url: string;
   };
 }
 
-export const DEFAULT_CONFIG: IConfigOptions = {
+export interface ResolvedConfigOptions extends ConfigOptions {
+  sentry: {
+    DSN: string;
+    environment: string;
+  };
+  rageshake: {
+    submit_url: string;
+  };
+}
+
+export const DEFAULT_CONFIG: ResolvedConfigOptions = {
   sentry: { DSN: "", environment: "production" },
   rageshake: {
     submit_url: "https://element.io/bugreports/submit",