diff --git a/angular.json b/angular.json
index 8f50ad6..aa316d2 100644
--- a/angular.json
+++ b/angular.json
@@ -66,6 +66,14 @@
                 }
               ]
             },
+            "codespaces": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.codespaces.ts"
+                }
+              ]
+            },
             "es": {
               "localize": ["es"]
             }
@@ -83,6 +91,9 @@
             },
             "es": {
               "browserTarget": "youtube-dl-material:build:es"
+            },
+            "codespaces": {
+              "browserTarget": "youtube-dl-material:build:codespaces"
             }
           }
         },
diff --git a/backend/app.js b/backend/app.js
index 4bc9584..178fd98 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -565,6 +565,7 @@ function loadConfigValues() {
 }
 
 function getOrigin() {
+    if (process.env.CODESPACES) return `https://${process.env.CODESPACE_NAME}-4200.${process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}`;
     return url_domain.origin;
 }
 
diff --git a/package.json b/package.json
index 34858c9..dd93218 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "codespaces": "ng serve --configuration=codespaces",
     "build": "ng build --configuration production",
     "prebuild": "node src/postbuild.mjs",
     "heroku-postbuild": "npm install --prefix backend",
diff --git a/src/app/posts.services.ts b/src/app/posts.services.ts
index e1a4af1..7bde6d9 100644
--- a/src/app/posts.services.ts
+++ b/src/app/posts.services.ts
@@ -119,6 +119,7 @@ import {
 import { isoLangs } from './dialogs/user-profile-dialog/locales_list';
 import { Title } from '@angular/platform-browser';
 import { MatDrawerMode } from '@angular/material/sidenav';
+import { environment } from '../environments/environment';
 
 @Injectable()
 export class PostsService implements CanActivate {
@@ -176,7 +177,7 @@ export class PostsService implements CanActivate {
 
         if (isDevMode()) {
             this.debugMode = true;
-            this.path = 'http://localhost:17442/api/';
+            this.path = !environment.codespaces ? 'http://localhost:17442/api/' : `${window.location.origin.replace('4200', '17442')}/api/`;
         }
 
         this.http_params = `apiKey=${this.auth_token}`
diff --git a/src/environments/environment.codespaces.ts b/src/environments/environment.codespaces.ts
new file mode 100644
index 0000000..aa9b985
--- /dev/null
+++ b/src/environments/environment.codespaces.ts
@@ -0,0 +1,9 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false,
+  codespaces: true
+};
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 3612073..ffe345e 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  codespaces: false
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 4f0114a..316b8c1 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,5 +4,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: true
+  production: false,
+  codespaces: false
 };