Add the environment config files

angular.json

@@ -16,14 +16,27 @@
             "outputPath": "dist/sandkasten",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
             "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
               "budgets": [
                 {
                   "type": "initial",
@@ -39,6 +52,7 @@
               "outputHashing": "all"
             },
             "development": {
+              "fileReplacements": [],
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
@@ -67,10 +81,18 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": [],
             "karmaConfig": "karma.conf.js"
           }
@@ -78,7 +100,10 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
@@ -86,6 +111,8 @@
   },
   "cli": {
     "analytics": false,
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

src/app/components/editor/editor.component.ts

@@ -42,6 +42,7 @@ import {
     getDocument,
     peerExtension,
 } from '../../services/connection.service';
+import {environment} from "../../../environments/environment";
 
 const basicSetup: Extension = (() => [
     highlightActiveLineGutter(),
@@ -94,6 +95,7 @@ export class EditorComponent {
     get selectedLanguage(): LanguageDescription {
         return this._selectedLanguage;
     }
+
     set selectedLanguage(value: LanguageDescription) {
         this._selectedLanguage = value;
         if (value.name in CODE_DEFAULTS) {
@@ -106,10 +108,12 @@ export class EditorComponent {
             });
         });
     }
+
     private _linesNumbers: boolean = true;
     get linesNumbers() {
         return this._linesNumbers;
     }
+
     set linesNumbers(lines: boolean) {
         this._linesNumbers = lines;
         this.codemirror.editor?.dispatch({
@@ -138,13 +142,15 @@ export class EditorComponent {
     ];
 
     private client: WebSocket | undefined;
+
     @Input()
     set idRoom(idRoom: string) {
         if (idRoom === undefined) {
             return;
         }
 
-    this.client = new WebSocket(`ws://127.0.0.1:3000/live/${idRoom}`);
+        // this.client = new WebSocket(`ws://127.0.0.1:3000/live/${idRoom}`);
+        this.client = new WebSocket(`${environment.webSocketUrl}/live/${idRoom}`);
         this.client.addEventListener('open', async () => {
             let conn = new Connection(this.client!);
             let {version, doc} = await getDocument(conn);

src/app/services/backendService.service.ts

@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
 import {SSE} from 'sse.js';
 import {Observable, Subject} from 'rxjs';
+import {environment} from "../../environments/environment";
 
 export type ExecutionMessage = {
     type: 'stdout' | 'stderr' | 'exit';
@@ -11,10 +12,12 @@ export type ExecutionMessage = {
     providedIn: 'root',
 })
 export class BackendService {
-  private apiUrl = 'http://localhost:3000';
+    private apiUrl = environment.apiUrl;
+
     private resultSubject = new Subject<ExecutionMessage>();
 
-  constructor() {}
+    constructor() {
+    }
 
     async createRoom(code: string) {
         const reponse = await fetch(`${this.apiUrl}/live`, {

src/environments/environment.prod.ts

@@ -0,0 +1,5 @@
+export const environment = {
+    production: true,
+    apiUrl: 'https://tododomain.com',
+    webSocketUrl: 'ws://tododomain.com',
+};

src/environments/environment.ts

@@ -0,0 +1,5 @@
+export const environment = {
+    production: false,
+    apiUrl: 'http://localhost:3000',
+    webSocketUrl: 'ws://localhost:3000',
+};