Fetch config from the build environment config (#13)

Add two environment files for production and development

Co-authored-by: cofrizot <colin.frizot@etu.uca.fr>
Reviewed-on: #13
Reviewed-by: Clément FRÉVILLE <clement.freville2@etu.uca.fr>
Co-authored-by: Colin FRIZOT <colin.frizot@etu.uca.fr>
Co-committed-by: Colin FRIZOT <colin.frizot@etu.uca.fr>

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

@@ -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,14 @@ 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(`${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,7 +12,8 @@ export type ExecutionMessage = {
   providedIn: 'root',
 })
 export class BackendService {
-  private apiUrl = 'http://localhost:3000';
+  private apiUrl = environment.apiUrl;
+
   private resultSubject = new Subject<ExecutionMessage>();
 
   constructor() {}

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