Handle when VS Code fails to load

This is mostly for development where VS Code might not have finished compiling yet.

Handle when VS Code fails to load
This is mostly for development where VS Code might not have finished compiling yet.
6e809b6a · Asher · 7c6fe560 · 6e809b6a · 6e809b6a · 6e809b6a
9 changed file
--- a/scripts/build.ts
+++ b/scripts/build.ts
@@ -246,18 +246,11 @@ class Builder {
    await this.task("copying vs code into build directory", async () => {
      await fs.mkdirp(vscodeBuildPath)
      await Promise.all([
-        (async (): Promise<void> => {
-          await fs.move(
-            path.join(this.vscodeSourcePath, `out-vscode${process.env.MINIFY ? "-min" : ""}`),
-            path.join(vscodeBuildPath, "out")
-          )
-          await fs.remove(path.join(vscodeBuildPath, "out/vs/server/browser/workbench.html"))
-          await fs.move(
-            path.join(vscodeBuildPath, "out/vs/server/browser/workbench-build.html"),
-            path.join(vscodeBuildPath, "out/vs/server/browser/workbench.html")
-          )
-        })(),
-        await fs.copy(path.join(this.vscodeSourcePath, ".build/extensions"), path.join(vscodeBuildPath, "extensions")),
+        fs.move(
+          path.join(this.vscodeSourcePath, `out-vscode${process.env.MINIFY ? "-min" : ""}`),
+          path.join(vscodeBuildPath, "out")
+        ),
+        fs.copy(path.join(this.vscodeSourcePath, ".build/extensions"), path.join(vscodeBuildPath, "extensions")),
      ])
    })


--- a/scripts/vscode.patch
+++ b/scripts/vscode.patch
@@ -418,7 +418,7 @@ index d0f6e6b18a..1966fd297d 100644
 -
 diff --git a/src/vs/server/browser/client.ts b/src/vs/server/browser/client.ts
 new file mode 100644
-index 0000000000..8e7c5af184
+index 0000000000..3a62205b38
 --- /dev/null
 +++ b/src/vs/server/browser/client.ts
 @@ -0,0 +1,162 @@
@@ -532,12 +532,12 @@ index 0000000000..8e7c5af184
 +	if (!window.isSecureContext) {
 +		(services.get(INotificationService) as INotificationService).notify({
 +			severity: Severity.Warning,
-+			message: "code-server is being accessed over an insecure domain. Some functionality may not work as expected.",
+			message: 'code-server is being accessed over an insecure domain. Some functionality may not work as expected.',
 +			actions: {
 +				primary: [{
-+					id: "understand",
-+					label: "I understand",
-+					tooltip: "",
+					id: 'understand',
+					label: 'I understand',
+					tooltip: '',
 +					class: undefined,
 +					enabled: true,
 +					checked: true,
@@ -679,165 +679,6 @@ index 0000000000..0d2e93edae
 +		this.disposed = true;
 +	}
 +}
-diff --git a/src/vs/server/browser/workbench-build.html b/src/vs/server/browser/workbench-build.html
-new file mode 100644
-index 0000000000..50f48cd74c
--- /dev/null
-+++ b/src/vs/server/browser/workbench-build.html
-@@ -0,0 +1,92 @@
-+<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
-+<!DOCTYPE html>
-+<html>
-+	<head>
-+		<meta charset="utf-8" />
-+
-+		<!-- Disable pinch zooming -->
-+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-+
-+		<!-- Workbench Configuration -->
-+		<meta id="vscode-workbench-web-configuration" data-settings="{{WORKBENCH_WEB_CONFIGURATION}}">
-+
-+		<!-- Workarounds/Hacks (remote user data uri) -->
-+		<meta id="vscode-remote-user-data-uri" data-settings="{{REMOTE_USER_DATA_URI}}">
-+		<!-- NOTE@coder: Added the commit for use in caching, the product for the
-+		extensions gallery URL, and nls for language support. -->
-+		<meta id="vscode-remote-commit" data-settings="{{COMMIT}}">
-+		<meta id="vscode-remote-product-configuration" data-settings="{{PRODUCT_CONFIGURATION}}">
-+		<meta id="vscode-remote-nls-configuration" data-settings="{{NLS_CONFIGURATION}}">
-+
-+		<!-- Workbench Icon/Manifest/CSS -->
-+		<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 data-name="vs/workbench/workbench.web.api" rel="stylesheet" href="./static-{{COMMIT}}/out/vs/workbench/workbench.web.api.css">
-+		<link rel="apple-touch-icon" href="./static-{{COMMIT}}/src/browser/media/code-server.png" />
-+		<meta name="apple-mobile-web-app-capable" content="yes">
-+
-+		<!-- Prefetch to avoid waterfall -->
-+		<link rel="prefetch" href="./static-{{COMMIT}}/node_modules/semver-umd/lib/semver-umd.js">
-+	</head>
-+
-+	<body aria-label="">
-+	</body>
-+
-+	<!-- Startup (do not modify order of script tags!) -->
-+	<!-- NOTE:coder: Modified to work against the current path and use the commit for caching. -->
-+	<script>
-+		// NOTE: Changes to inline scripts require update of content security policy
-+		const basePath = window.location.pathname.replace(/\/+$/, '');
-+		const base = window.location.origin  + basePath;
-+		const el = document.getElementById('vscode-remote-commit');
-+		const commit = el ? el.getAttribute('data-settings') : "";
-+		const staticBase = base + '/static-' + commit;
-+		let nlsConfig;
-+		try {
-+			nlsConfig = JSON.parse(document.getElementById('vscode-remote-nls-configuration').getAttribute('data-settings'));
-+			if (nlsConfig._resolvedLanguagePackCoreLocation) {
-+				const bundles = Object.create(null);
-+				nlsConfig.loadBundle = (bundle, language, cb) => {
-+					let result = bundles[bundle];
-+					if (result) {
-+						return cb(undefined, result);
-+					}
-+					// FIXME: Only works if path separators are /.
-+					const path = nlsConfig._resolvedLanguagePackCoreLocation
-+								+ '/' + bundle.replace(/\//g, '!') + '.nls.json';
-+					fetch(`${base}/resource/?path=${encodeURIComponent(path)}`)
-+						.then((response) => response.json())
-+						.then((json) => {
-+							bundles[bundle] = json;
-+							cb(undefined, json);
-+						})
-+						.catch(cb);
-+				};
-+			}
-+		} catch (error) { /* Probably fine. */ }
-+		self.require = {
-+			baseUrl: `${staticBase}/out`,
-+			paths: {
-+				'vscode-textmate': `${staticBase}/node_modules/vscode-textmate/release/main`,
-+				'onigasm-umd': `${staticBase}/node_modules/onigasm-umd/release/main`,
-+				'xterm': `${staticBase}/node_modules/xterm/lib/xterm.js`,
-+				'xterm-addon-search': `${staticBase}/node_modules/xterm-addon-search/lib/xterm-addon-search.js`,
-+				'xterm-addon-web-links': `${staticBase}/node_modules/xterm-addon-web-links/lib/xterm-addon-web-links.js`,
-+				'xterm-addon-webgl': `${staticBase}/node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js`,
-+				'semver-umd': `${staticBase}/node_modules/semver-umd/lib/semver-umd.js`,
-+			},
-+			'vs/nls': nlsConfig,
-+		};
-+	</script>
-+	<script src="./static-{{COMMIT}}/out/vs/loader.js"></script>
-+	<script src="./static-{{COMMIT}}/out/vs/workbench/workbench.web.api.nls.js"></script>
-+	<script src="./static-{{COMMIT}}/out/vs/workbench/workbench.web.api.js"></script>
-+	<!-- TODO@coder: This errors with multiple anonymous define calls (one is
-+	workbench.js and one is semver-umd.js). For now use the same method found in
-+	workbench-dev.html. Appears related to the timing of the script load events. -->
-+	<!-- <script src="./static-{{COMMIT}}/out/vs/workbench/workbench.js"></script> -->
-+	<script>
-+		// NOTE: Changes to inline scripts require update of content security policy
-+		require(['vs/code/browser/workbench/workbench'], function() {});
-+	</script>
-+</html>
-diff --git a/src/vs/server/browser/workbench.html b/src/vs/server/browser/workbench.html
-new file mode 100644
-index 0000000000..47d76f388b
--- /dev/null
-+++ b/src/vs/server/browser/workbench.html
-@@ -0,0 +1,55 @@
-+<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
-+<!DOCTYPE html>
-+<html>
-+	<head>
-+		<meta charset="utf-8" />
-+
-+		<!-- Disable pinch zooming -->
-+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-+
-+		<!-- Workbench Configuration -->
-+		<meta id="vscode-workbench-web-configuration" data-settings="{{WORKBENCH_WEB_CONFIGURATION}}">
-+
-+		<!-- Workarounds/Hacks (remote user data uri) -->
-+		<meta id="vscode-remote-user-data-uri" data-settings="{{REMOTE_USER_DATA_URI}}">
-+		<!-- NOTE@coder: Added the commit for use in caching, the product for the
-+		extensions gallery URL, and nls for language support. -->
-+		<meta id="vscode-remote-commit" data-settings="{{COMMIT}}">
-+		<meta id="vscode-remote-product-configuration" data-settings="{{PRODUCT_CONFIGURATION}}">
-+		<meta id="vscode-remote-nls-configuration" data-settings="{{NLS_CONFIGURATION}}">
-+
-+		<!-- Workbench Icon/Manifest/CSS -->
-+		<link rel="icon" href="../static/src/browser/media/favicon.ico" type="image/x-icon" />
-+		<link rel="manifest" href="../static/src/browser/media/manifest.json" crossorigin="use-credentials">
-+		<link rel="apple-touch-icon" href="./static/src/browser/media/code-server.png" />
-+		<meta name="apple-mobile-web-app-capable" content="yes">
-+	</head>
-+
-+	<body aria-label="">
-+	</body>
-+
-+	<!-- Startup (do not modify order of script tags!) -->
-+	<script>
-+		const basePath = window.location.pathname.replace(/\/+$/, '');
-+		const base = window.location.origin  + basePath;
-+		const el = document.getElementById('vscode-remote-commit');
-+		const commit = el ? el.getAttribute('data-settings') : "";
-+		const staticBase = base + '/static-' + commit;
-+		self.require = {
-+			baseUrl: `${staticBase}/out`,
-+			paths: {
-+				'vscode-textmate': `${staticBase}/node_modules/vscode-textmate/release/main`,
-+				'onigasm-umd': `${staticBase}/node_modules/onigasm-umd/release/main`,
-+				'xterm': `${staticBase}/node_modules/xterm/lib/xterm.js`,
-+				'xterm-addon-search': `${staticBase}/node_modules/xterm-addon-search/lib/xterm-addon-search.js`,
-+				'xterm-addon-web-links': `${staticBase}/node_modules/xterm-addon-web-links/lib/xterm-addon-web-links.js`,
-+				'xterm-addon-webgl': `${staticBase}/node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js`,
-+				'semver-umd': `${staticBase}/node_modules/semver-umd/lib/semver-umd.js`,
-+			},
-+		};
-+	</script>
-+	<script src="./static/out/vs/loader.js"></script>
-+	<script>
-+		require(['vs/code/browser/workbench/workbench'], function() {});
-+	</script>
-+</html>
 diff --git a/src/vs/server/browser/worker.ts b/src/vs/server/browser/worker.ts
 new file mode 100644
 index 0000000000..0ba93cc070

--- a/src/node/app/server.tsx
+++ b/src/node/app/server.tsx
@@ -19,7 +19,7 @@ export class MainHttpProvider extends HttpProvider {
  ): Promise<HttpResponse | undefined> {
    if (base === "/static") {
      const response = await this.getResource(this.rootPath, requestPath)
-      if (this.options.commit && this.options.commit !== "development") {
+      if (!this.isDev) {
        response.cache = true
      }
      return response
@@ -41,7 +41,7 @@ export class MainHttpProvider extends HttpProvider {

    const response = await this.getUtf8Resource(this.rootPath, "src/browser/index.html")
    response.content = response.content
-      .replace(/{{COMMIT}}/g, this.options.commit || "development")
+      .replace(/{{COMMIT}}/g, this.options.commit)
      .replace(/"{{OPTIONS}}"/g, `'${JSON.stringify(options)}'`)
      .replace(/{{COMPONENT}}/g, ReactDOMServer.renderToString(<App options={options} />))
    return response

--- a/src/node/entry.ts
+++ b/src/node/entry.ts
@@ -23,7 +23,7 @@ const main = async (args: Args = {}): Promise<void> => {
  const auth = args.auth || AuthType.Password
  const originalPassword = auth === AuthType.Password && (process.env.PASSWORD || (await generatePassword()))

-  let commit = "development"
+  let commit: string | undefined
  try {
    commit = require("../../package.json").commit
  } catch (error) {
@@ -36,7 +36,7 @@ const main = async (args: Args = {}): Promise<void> => {
    basePath: args["base-path"],
    cert: args.cert,
    certKey: args["cert-key"],
-    commit,
+    commit: commit || "development",
    host: args.host || (args.auth === AuthType.Password && typeof args.cert !== "undefined" ? "0.0.0.0" : "localhost"),
    password: originalPassword ? hash(originalPassword) : undefined,
    port: typeof args.port !== "undefined" ? parseInt(args.port, 10) : 8080,

--- a/src/node/http.ts
+++ b/src/node/http.ts
@@ -112,7 +112,7 @@ export interface HttpProviderOptions {
  readonly base: string
  readonly auth: AuthType
  readonly password?: string
-  readonly commit?: string
+  readonly commit: string
 }

 /**
@@ -150,6 +150,10 @@ export abstract class HttpProvider {
    request: http.IncomingMessage
  ): Promise<HttpResponse | undefined>

+  protected get isDev(): boolean {
+    return this.options.commit === "development"
+  }
+
  /**
   * Return the specified path with the base path prepended.
   */

--- a/src/node/vscode/error.html
+++ b/src/node/vscode/error.html
+<!DOCTYPE html>
+<html lang="en">
+  <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:;"> -->
+    <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 href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet" />
+    <meta id="coder-options" data-settings="{{OPTIONS}}">
+  </head>
+  <body>
+    <div id="root" style="color:#f4f4f4;padding:20px;max-width:700px;">
+      {{ERROR}}
+    </div>
+    <script>
+      if (parent) {
+        parent.postMessage({ event: "loaded" }, window.location.origin);
+      }
+    </script>
+  </body>
+</html>
--- a/src/node/vscode/server.ts
+++ b/src/node/vscode/server.ts
@@ -128,7 +128,11 @@ export class VscodeHttpProvider extends HttpProvider {
        if (!this.authenticated(request)) {
          return { redirect: "/login" }
        }
-        return this.getRoot(request, query)
+        try {
+          return await this.getRoot(request, query)
+        } catch (error) {
+          return this.getErrorRoot(error)
+        }
      case "/static": {
        switch (requestPath) {
          case "/out/vs/workbench/services/extensions/worker/extensionHostWorkerMain.js": {
@@ -171,7 +175,7 @@ export class VscodeHttpProvider extends HttpProvider {
  private async getRoot(request: http.IncomingMessage, query: querystring.ParsedUrlQuery): Promise<HttpResponse> {
    const settings = await this.settings.read()
    const [response, options] = await Promise.all([
-      this.getUtf8Resource(this.serverRootPath, "browser/workbench.html"),
+      await this.getUtf8Resource(this.rootPath, `src/node/vscode/workbench${!this.isDev ? "-build" : ""}.html`),
      this.initialize({
        args: this.args,
        query,
@@ -201,4 +205,13 @@ export class VscodeHttpProvider extends HttpProvider {
        .replace(`"{{NLS_CONFIGURATION}}"`, `'${JSON.stringify(options.nlsConfiguration)}'`),
    }
  }
+
+  private async getErrorRoot(error: Error): Promise<HttpResponse> {
+    const response = await this.getUtf8Resource(this.rootPath, "src/node/vscode/error.html")
+    const message = `VS Code failed to load. ${
+      this.isDev ? "It might not have finished compiling (check for 'Finished compilation' in the output)." : ""
+    } <br><br>${error}`
+    response.content = response.content.replace(/{{COMMIT}}/g, this.options.commit).replace(/{{ERROR}}/g, message)
+    return response
+  }
 }
--- a/src/node/vscode/workbench-build.html
+++ b/src/node/vscode/workbench-build.html
+<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <!-- Disable pinch zooming -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+
+    <!-- Workbench Configuration -->
+    <meta id="vscode-workbench-web-configuration" data-settings="{{WORKBENCH_WEB_CONFIGURATION}}">
+
+    <!-- Workarounds/Hacks (remote user data uri) -->
+    <meta id="vscode-remote-user-data-uri" data-settings="{{REMOTE_USER_DATA_URI}}">
+    <!-- NOTE@coder: Added the commit for use in caching, the product for the
+         extensions gallery URL, and nls for language support. -->
+    <meta id="vscode-remote-commit" data-settings="{{COMMIT}}">
+    <meta id="vscode-remote-product-configuration" data-settings="{{PRODUCT_CONFIGURATION}}">
+    <meta id="vscode-remote-nls-configuration" data-settings="{{NLS_CONFIGURATION}}">
+
+    <!-- Workbench Icon/Manifest/CSS -->
+    <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 data-name="vs/workbench/workbench.web.api" rel="stylesheet" href="./static-{{COMMIT}}/out/vs/workbench/workbench.web.api.css">
+    <link rel="apple-touch-icon" href="./static-{{COMMIT}}/src/browser/media/code-server.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <!-- Prefetch to avoid waterfall -->
+    <link rel="prefetch" href="./static-{{COMMIT}}/node_modules/semver-umd/lib/semver-umd.js">
+  </head>
+
+  <body aria-label="">
+  </body>
+
+  <!-- Startup (do not modify order of script tags!) -->
+  <!-- NOTE:coder: Modified to work against the current path and use the commit for caching. -->
+  <script>
+    // NOTE: Changes to inline scripts require update of content security policy
+    const basePath = window.location.pathname.replace(/\/+$/, '');
+    const base = window.location.origin  + basePath;
+    const el = document.getElementById('vscode-remote-commit');
+    const commit = el ? el.getAttribute('data-settings') : "";
+    const staticBase = base + '/static-' + commit;
+    let nlsConfig;
+    try {
+        nlsConfig = JSON.parse(document.getElementById('vscode-remote-nls-configuration').getAttribute('data-settings'));
+        if (nlsConfig._resolvedLanguagePackCoreLocation) {
+            const bundles = Object.create(null);
+            nlsConfig.loadBundle = (bundle, language, cb) => {
+                let result = bundles[bundle];
+                if (result) {
+                    return cb(undefined, result);
+                }
+                // FIXME: Only works if path separators are /.
+                const path = nlsConfig._resolvedLanguagePackCoreLocation
+                      + '/' + bundle.replace(/\//g, '!') + '.nls.json';
+                fetch(`${base}/resource/?path=${encodeURIComponent(path)}`)
+                    .then((response) => response.json())
+                    .then((json) => {
+                        bundles[bundle] = json;
+                        cb(undefined, json);
+                    })
+                    .catch(cb);
+            };
+        }
+    } catch (error) { /* Probably fine. */ }
+    self.require = {
+        baseUrl: `${staticBase}/out`,
+        paths: {
+            'vscode-textmate': `${staticBase}/node_modules/vscode-textmate/release/main`,
+            'onigasm-umd': `${staticBase}/node_modules/onigasm-umd/release/main`,
+            'xterm': `${staticBase}/node_modules/xterm/lib/xterm.js`,
+            'xterm-addon-search': `${staticBase}/node_modules/xterm-addon-search/lib/xterm-addon-search.js`,
+            'xterm-addon-web-links': `${staticBase}/node_modules/xterm-addon-web-links/lib/xterm-addon-web-links.js`,
+            'xterm-addon-webgl': `${staticBase}/node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js`,
+            'semver-umd': `${staticBase}/node_modules/semver-umd/lib/semver-umd.js`,
+        },
+        'vs/nls': nlsConfig,
+    };
+  </script>
+  <script src="./static-{{COMMIT}}/out/vs/loader.js"></script>
+  <script src="./static-{{COMMIT}}/out/vs/workbench/workbench.web.api.nls.js"></script>
+  <script src="./static-{{COMMIT}}/out/vs/workbench/workbench.web.api.js"></script>
+  <!-- TODO@coder: This errors with multiple anonymous define calls (one is
+       workbench.js and one is semver-umd.js). For now use the same method found in
+       workbench-dev.html. Appears related to the timing of the script load events. -->
+  <!-- <script src="./static-{{COMMIT}}/out/vs/workbench/workbench.js"></script> -->
+  <script>
+    // NOTE: Changes to inline scripts require update of content security policy
+    require(['vs/code/browser/workbench/workbench'], function() {});
+  </script>
+</html>
--- a/src/node/vscode/workbench.html
+++ b/src/node/vscode/workbench.html
+<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <!-- Disable pinch zooming -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+
+    <!-- Workbench Configuration -->
+    <meta id="vscode-workbench-web-configuration" data-settings="{{WORKBENCH_WEB_CONFIGURATION}}">
+
+    <!-- Workarounds/Hacks (remote user data uri) -->
+    <meta id="vscode-remote-user-data-uri" data-settings="{{REMOTE_USER_DATA_URI}}">
+    <!-- NOTE@coder: Added the commit for use in caching, the product for the
+         extensions gallery URL, and nls for language support. -->
+    <meta id="vscode-remote-commit" data-settings="{{COMMIT}}">
+    <meta id="vscode-remote-product-configuration" data-settings="{{PRODUCT_CONFIGURATION}}">
+    <meta id="vscode-remote-nls-configuration" data-settings="{{NLS_CONFIGURATION}}">
+
+    <!-- Workbench Icon/Manifest/CSS -->
+    <link rel="icon" href="./static/src/browser/media/favicon.ico" type="image/x-icon" />
+    <link rel="manifest" href="./static/src/browser/media/manifest.json" crossorigin="use-credentials">
+    <link rel="apple-touch-icon" href="./static/src/browser/media/code-server.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+  </head>
+
+  <body aria-label="">
+  </body>
+
+  <!-- Startup (do not modify order of script tags!) -->
+  <script>
+    const basePath = window.location.pathname.replace(/\/+$/, '');
+    const base = window.location.origin  + basePath;
+    const el = document.getElementById('vscode-remote-commit');
+    const commit = el ? el.getAttribute('data-settings') : "";
+    const staticBase = base + '/static-' + commit;
+    self.require = {
+        baseUrl: `${staticBase}/out`,
+        paths: {
+            'vscode-textmate': `${staticBase}/node_modules/vscode-textmate/release/main`,
+            'onigasm-umd': `${staticBase}/node_modules/onigasm-umd/release/main`,
+            'xterm': `${staticBase}/node_modules/xterm/lib/xterm.js`,
+            'xterm-addon-search': `${staticBase}/node_modules/xterm-addon-search/lib/xterm-addon-search.js`,
+            'xterm-addon-web-links': `${staticBase}/node_modules/xterm-addon-web-links/lib/xterm-addon-web-links.js`,
+            'xterm-addon-webgl': `${staticBase}/node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js`,
+            'semver-umd': `${staticBase}/node_modules/semver-umd/lib/semver-umd.js`,
+        },
+    };
+  </script>
+  <script src="./static/out/vs/loader.js"></script>
+  <script>
+    require(['vs/code/browser/workbench/workbench'], function() {});
+  </script>
+</html>