Move BASE_URL to the build script

.vscode/tasks.json

@@ -21,7 +21,8 @@
         "cwd": "${workspaceFolder}/src/MistoxWebsite.Client"
       },
       "args": [
-        "build"
+        "build",
+        "--base-href=http://localhost:5000"
       ],
       "problemMatcher": "$msCompile"
     },

Dockerfile

@@ -5,6 +5,9 @@
 FROM node:alpine AS build-frontend
 WORKDIR /src
 
+# Define base address
+ARG BASE_URL=/
+
 # Install the angular CLI
 RUN npm install -g @angular/cli
 
@@ -18,7 +21,7 @@ RUN npm install
 COPY ./src/MistoxWebsite.Client/ ./
 
 # Compile the source
-RUN ng build
+RUN ng build --base-href=${BASE_URL}
 
 #####################
 ##  Build Backend  ##

docker-build.sh

@@ -2,7 +2,7 @@
 
 # Compile the source
 docker build -t mistox-sql ./database
-docker build -t mistox-website .
+docker build --build-arg BASE_URL=https://mistox.com -t mistox-website .
 
 # Start the servers
 docker compose up -d --force-recreate --remove-orphans

src/MistoxWebsite.Client/src/app/pages/account/forgotpassword/forgotpassword.component.ts

@@ -37,7 +37,7 @@ export class ForgotPasswordComponent {
     const headers = new HttpHeaders({
         'Content-Type': 'application/x-www-form-urlencoded',
     });
-    this.http.post( "https://mistox.com/api/account/sendresetpassword", body, { headers, responseType: "text"  } ).subscribe({
+    this.http.post( "api/account/sendresetpassword", body, { headers, responseType: "text"  } ).subscribe({
       next: async (data) => {
           if (data.trim() == "Success"){
             this.errorMsgs = ["Reset-password sent"];

src/MistoxWebsite.Client/src/app/pages/account/register/register.component.ts

@@ -66,7 +66,7 @@ export class RegisterComponent {
     const headers = new HttpHeaders({
         'Content-Type': 'application/x-www-form-urlencoded'
     });
-    this.http.post<Account>( "https://mistox.com/api/account/register", body, { headers } ).subscribe({
+    this.http.post<Account>( "api/account/register", body, { headers } ).subscribe({
         next: async (data) => {
             if (data.error.length === 0){
               this.errorMsgs = ["Account Created"];

src/MistoxWebsite.Client/src/app/pages/account/resetpassword/resetpassword.component.ts

@@ -48,7 +48,7 @@ export class ResetPasswordComponent {
       const headers = new HttpHeaders({
           'Content-Type': 'application/x-www-form-urlencoded'
       });
-      this.http.post<boolean>( "https://mistox.com/api/account/resetpassword", body, { headers } ).subscribe({
+      this.http.post<boolean>( "api/account/resetpassword", body, { headers } ).subscribe({
           next: async (data) => {
               if (data == true){
                 this.errorMsgs = ["Password reset successfully"];

src/MistoxWebsite.Client/src/app/pages/account/verifyemail/verifyemail.component.ts

@@ -36,7 +36,7 @@ export class VerifyEmailComponent {
     const headers = new HttpHeaders({
         'Content-Type': 'application/x-www-form-urlencoded'
     });
-    this.http.post<boolean>( "https://mistox.com/api/account/verifyemail", body, { headers } ).subscribe({
+    this.http.post<boolean>( "api/account/verifyemail", body, { headers } ).subscribe({
         next: async (data) => {
             if (data == true){
               this.Result = "Verified Email Successfully";

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.ts

@@ -84,7 +84,7 @@ export class NewItemComponent {
     }
 
     // Proccess data
-    this.http.post<boolean>( "https://mistox.com/api/product/create", formData ).subscribe({
+    this.http.post<boolean>( "api/product/create", formData ).subscribe({
         next: async (data) => {
             if (data == true){
               this.errorMsgs = ["Product Created Successfully"];

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.ts

@@ -21,7 +21,7 @@ export class CatalogComponent {
     this.title.setTitle("Store | Mistox");
 
     // load each product
-    http.post<Product[]>("https://mistox.com/api/product/getall", null).subscribe(
+    http.post<Product[]>("api/product/getall", null).subscribe(
       response => {
         this.Products = response;
 
@@ -29,7 +29,7 @@ export class CatalogComponent {
         this.Products.forEach(item => {
           item.curShowingIMG = 0;
           item.images.forEach(img => {
-            http.get("https://mistox.com/api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
+            http.get("api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
               img.imageSrc = URL.createObjectURL(blob);
               console.log(img.imageSrc);
             });
@@ -46,7 +46,7 @@ export class CatalogComponent {
     const headers = new HttpHeaders({
         'Content-Type': 'application/x-www-form-urlencoded',
     });
-    this.http.post<boolean>( "https://mistox.com/api/product/delete", body, { headers } ).subscribe({
+    this.http.post<boolean>( "api/product/delete", body, { headers } ).subscribe({
       next: data => {
         if (data){
           window.location.reload();

src/MistoxWebsite.Client/src/app/services/Authentication.ts

@@ -21,7 +21,7 @@ export class Authentication{
             'Content-Type': 'application/x-www-form-urlencoded'
         });
 
-        let sub = this.http.post<Account>( "https://mistox.com/api/account/login", body, { headers } );
+        let sub = this.http.post<Account>( "api/account/login", body, { headers } );
         sub.subscribe({
             next: data => {
                 if (data.error.length === 0){
@@ -37,7 +37,7 @@ export class Authentication{
     }
 
     Logout(){
-        this.http.post<Account>( "https://mistox.com/api/account/logout", {}, { responseType: 'json' } ).subscribe( );
+        this.http.post<Account>( "api/account/logout", {}, { responseType: 'json' } ).subscribe( );
         this._user.next( new Account );
         this.delUserFromStorage();
     }