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"],
+            "assets": [
-            "styles": ["src/styles.scss"],
+              "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"],
+            "assets": [
-            "styles": ["src/styles.scss"],
+              "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

@@ -1,12 +1,12 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import {Component, Input, ViewChild} from '@angular/core';
-import { BackendService } from 'src/app/services/backendService.service';
+import {BackendService} from 'src/app/services/backendService.service';
-import { Compartment, StateEffect } from '@codemirror/state';
+import {Compartment, StateEffect} from '@codemirror/state';
-import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
+import {CodeMirrorComponent} from '@sandkasten/codemirror6-editor';
-import { LanguageDescription } from '@codemirror/language';
+import {LanguageDescription} from '@codemirror/language';
-import { CODE_DEFAULTS, LANGUAGES } from '../languages';
+import {CODE_DEFAULTS, LANGUAGES} from '../languages';
-import { SafeHTMLPipe } from '../../safe-html.pipe';
+import {SafeHTMLPipe} from '../../safe-html.pipe';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {ReactiveFormsModule, FormsModule} from '@angular/forms';
-import { Router } from '@angular/router';
+import {Router} from '@angular/router';
 import {
     keymap,
     highlightSpecialChars,
@@ -19,7 +19,7 @@ import {
     highlightActiveLineGutter,
     gutter,
 } from '@codemirror/view';
-import { Extension, EditorState } from '@codemirror/state';
+import {Extension, EditorState} from '@codemirror/state';
 import {
     defaultHighlightStyle,
     syntaxHighlighting,
@@ -28,20 +28,21 @@ import {
     foldGutter,
     foldKeymap,
 } from '@codemirror/language';
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import {defaultKeymap, history, historyKeymap} from '@codemirror/commands';
-import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
 import {
     autocompletion,
     completionKeymap,
     closeBrackets,
     closeBracketsKeymap,
 } from '@codemirror/autocomplete';
-import { lintKeymap } from '@codemirror/lint';
+import {lintKeymap} from '@codemirror/lint';
 import {
     Connection,
     getDocument,
     peerExtension,
 } from '../../services/connection.service';
+import {environment} from "../../../environments/environment";
 
 const basicSetup: Extension = (() => [
     highlightActiveLineGutter(),
@@ -52,7 +53,7 @@ const basicSetup: Extension = (() => [
     dropCursor(),
     EditorState.allowMultipleSelections.of(true),
     indentOnInput(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
     bracketMatching(),
     closeBrackets(),
     autocompletion(),
@@ -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,16 +142,18 @@ 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);
+            let {version, doc} = await getDocument(conn);
 
             this.codemirror.editor?.dispatch({
                 changes: {
@@ -212,7 +218,7 @@ export class EditorComponent {
     }
 
     saveToFile() {
-    const blob = new Blob([this.editorContent], { type: 'text/plain' });
+        const blob = new Blob([this.editorContent], {type: 'text/plain'});
         const a = document.createElement('a');
         a.download = `code.${this.selectedLanguage.extensions![0]}`;
         a.href = URL.createObjectURL(blob);

src/app/services/backendService.service.ts

@@ -1,6 +1,7 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
-import { SSE } from 'sse.js';
+import {SSE} from 'sse.js';
-import { Observable, Subject } from 'rxjs';
+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`, {
@@ -22,7 +25,7 @@ export class BackendService {
             headers: {
                 'Content-Type': 'application/json',
             },
-      body: JSON.stringify({ code }),
+            body: JSON.stringify({code}),
         });
         return reponse.text();
     }
@@ -34,7 +37,7 @@ export class BackendService {
                 'Content-Type': 'application/json',
                 Accept: 'text/event-stream',
             },
-      payload: JSON.stringify({ code, language }),
+            payload: JSON.stringify({code, language}),
         });
 
         sse.addEventListener('message', (event: MessageEvent<string>) => {
@@ -46,7 +49,7 @@ export class BackendService {
             if (type === 'end') {
                 sse.close();
             }
-      this.resultSubject.next({ type, text });
+            this.resultSubject.next({type, text});
         });
     }
 

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',
+};