Make routing base path agnostic

src/browser/api.ts

@@ -1,3 +1,4 @@
+import { getBasepath } from "hookrouter"
 import { Application, ApplicationsResponse, CreateSessionResponse, FilesResponse, RecentResponse } from "../common/api"
 import { ApiEndpoint, HttpCode, HttpError } from "../common/http"
 
@@ -18,7 +19,7 @@ export function setAuthed(authed: boolean): void {
  * Also set authed to false if the request returns unauthorized.
  */
 const tryRequest = async (endpoint: string, options?: RequestInit): Promise<Response> => {
-  const response = await fetch("/api" + endpoint + "/", options)
+  const response = await fetch(getBasepath() + "/api" + endpoint + "/", options)
   if (response.status === HttpCode.Unauthorized) {
     setAuthed(false)
   }
@@ -33,14 +34,9 @@ const tryRequest = async (endpoint: string, options?: RequestInit): Promise<Resp
  * Try authenticating.
  */
 export const authenticate = async (body?: AuthBody): Promise<void> => {
-  let formBody: URLSearchParams | undefined
-  if (body) {
-    formBody = new URLSearchParams()
-    formBody.append("password", body.password)
-  }
   const response = await tryRequest(ApiEndpoint.login, {
     method: "POST",
-    body: formBody,
+    body: JSON.stringify({ ...body, basePath: getBasepath() }),
     headers: {
       "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
     },

src/browser/app.tsx

@@ -1,4 +1,4 @@
-import { getBasepath, navigate } from "hookrouter"
+import { getBasepath, navigate, setBasepath } from "hookrouter"
 import * as React from "react"
 import { Application, isExecutableApplication } from "../common/api"
 import { HttpError } from "../common/http"
@@ -11,25 +11,36 @@ export interface AppProps {
 }
 
 const App: React.FunctionComponent<AppProps> = (props) => {
-  const [authed, setAuthed] = React.useState<boolean>(!!props.options.authed)
+  const [authed, setAuthed] = React.useState<boolean>(props.options.authed)
   const [app, setApp] = React.useState<Application | undefined>(props.options.app)
   const [error, setError] = React.useState<HttpError | Error | string>()
 
+  if (typeof window !== "undefined") {
+    const url = new URL(window.location.origin + window.location.pathname + props.options.basePath)
+    setBasepath(normalize(url.pathname))
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(window as any).setAuthed = (a: boolean): void => {
+      if (authed !== a) {
+        setAuthed(a)
+        // TEMP: Remove when no longer auto-loading VS Code.
+        if (a && !app) {
+          setApp({
+            name: "VS Code",
+            path: "/",
+            embedPath: "/vscode-embed",
+          })
+        }
+      }
+    }
+  }
+
   React.useEffect(() => {
     if (app && !isExecutableApplication(app)) {
       navigate(normalize(`${getBasepath()}/${app.path}/`, true))
     }
   }, [app])
 
-  if (typeof window !== "undefined") {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(window as any).setAuthed = (a: boolean): void => {
-      if (authed !== a) {
-        setAuthed(a)
-      }
-    }
-  }
-
   return (
     <>
       {!app || !app.loaded ? (
@@ -41,7 +52,7 @@ const App: React.FunctionComponent<AppProps> = (props) => {
       )}
       <Modal app={app} setApp={setApp} authed={authed} error={error} setError={setError} />
       {authed && app && app.embedPath ? (
-        <iframe id="iframe" src={normalize(`${getBasepath()}/${app.embedPath}/`, true)}></iframe>
+        <iframe id="iframe" src={normalize(`./${app.embedPath}/`, true)}></iframe>
       ) : (
         undefined
       )}

src/browser/components/modal.tsx

@@ -128,7 +128,6 @@ export const Modal: React.FunctionComponent<ModalProps> = (props) => {
           <aside className="sidebar-nav">
             <nav className="links">
               {props.authed ? (
-                // TEMP: Remove once we don't auto-load vscode.
                 <>
                   <button className="link" onClick={(): void => setSection(Section.Recent)}>
                     Recent

src/browser/index.html

@@ -3,17 +3,17 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <!-- <meta http-equiv="Content-Security-Policy" content="font-src 'self'; connect-src 'self'; default-src ws: wss:; style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:;"> -->
+    <meta http-equiv="Content-Security-Policy" content="font-src 'self' fonts.gstatic.com; connect-src 'self'; default-src ws: wss: 'self'; style-src 'self' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:;">
     <title>code-server</title>
-    <link rel="icon" href="/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" />
-    <link rel="manifest" href="/static-{{COMMIT}}/src/browser/media/manifest.json" crossorigin="use-credentials">
-    <link rel="apple-touch-icon" href="/static-{{COMMIT}}/src/browser/media/code-server.png" />
+    <link rel="icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" />
+    <link rel="manifest" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/manifest.json" crossorigin="use-credentials">
+    <link rel="apple-touch-icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/code-server.png" />
     <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet" />
-    <link href="/static-{{COMMIT}}/dist/index.css" rel="stylesheet">
+    <link href="{{BASE}}/static-{{COMMIT}}/dist/index.css" rel="stylesheet">
     <meta id="coder-options" data-settings="{{OPTIONS}}">
   </head>
   <body>
     <div id="root">{{COMPONENT}}</div>
-    <script src="/static-{{COMMIT}}/dist/index.js"></script>
+    <script src="{{BASE}}/static-{{COMMIT}}/dist/index.js"></script>
   </body>
 </html>