[NI] Consolidate playground into a single-origin server on port 8080

.codesandbox/tasks.json

@@ -13,20 +13,12 @@
 
   // These tasks can be run from CodeSandbox. Running one will open a log in the app.
   "tasks": {
-    "FE Server": {
-      "name": "FE Server",
-      "command": "cd examples/browser-api-playground && yarn && yarn start:client",
+    "App Server": {
+      "name": "App Server",
+      "command": "cd examples/browser-api-playground && yarn && yarn start",
       "runAtStart": true,
       "preview": {
-        "port": 3000
-      }
-    },
-    "BE Server": {
-      "name": "BE Server",
-      "command": "cd examples/browser-api-playground && yarn && yarn start:server",
-      "runAtStart": true,
-      "preview": {
-        "port": 8585
+        "port": 8080
       }
     }
   }

examples/browser-api-playground/Dockerfile

@@ -15,9 +15,9 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 RUN yarn install --frozen-lockfile --production
 
-COPY server.js webserver.js ./
+COPY server.js ./
 COPY --from=build /app/build ./build
 
-EXPOSE 8585 8080
+EXPOSE 8080
 
-CMD node server.js & node webserver.js
+CMD ["node", "server.js"]

examples/browser-api-playground/package.json

@@ -29,8 +29,7 @@
     "typescript": "4.4.2"
   },
   "scripts": {
-    "start:client": "yarn build && node webserver.js",
-    "start:server": "node server.js",
+    "start": "yarn build && node server.js",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

examples/browser-api-playground/server.js

@@ -1,21 +1,18 @@
 const express = require("express");
-const cors = require("cors");
 const axios = require("axios");
+const path = require("path");
 
 const app = express();
-const port = 8585;
+const port = 8080;
 
 app.use(express.json());
-app.use(cors());
 
 app.post("/generateAuthToken", (req, res) => {
-  // Extract the backend and user from the request
   const { backend, actAs, apiKey } = req.body;
   const tokenApiPath = backend.endsWith("/")
-  ? `${backend}rest/api/v1/createauthtoken`
-  : `${backend}/rest/api/v1/createauthtoken`;
+    ? `${backend}rest/api/v1/createauthtoken`
+    : `${backend}/rest/api/v1/createauthtoken`;
 
-  // Call the Glean server's createauthtoken endpoint
   axios({
     method: "POST",
     url: tokenApiPath,
@@ -30,13 +27,11 @@ app.post("/generateAuthToken", (req, res) => {
 });
 
 app.post("/generateAnonymousAuthToken", (req, res) => {
-  // Extract the backend and user from the request
-  const { backend, actAs } = req.body;
+  const { backend } = req.body;
   const tokenApiPath = backend.endsWith("/")
-  ? `${backend}rest/api/v1/createanonymoustoken`
-  : `${backend}/rest/api/v1/createanonymoustoken`;
+    ? `${backend}rest/api/v1/createanonymoustoken`
+    : `${backend}/rest/api/v1/createanonymoustoken`;
 
-  // Call the Glean server's createanonymoustoken endpoint
   axios({
     method: "post",
     url: tokenApiPath,
@@ -45,6 +40,15 @@ app.post("/generateAnonymousAuthToken", (req, res) => {
     .catch((error) => res.status(500).json({ error: error }));
 });
 
+const buildPath = path.join(__dirname, "build");
+app.use(express.static(buildPath));
+
+app.get("/_/healthz", (req, res) => res.sendStatus(200));
+
+app.get("/*", (req, res) => {
+  res.sendFile(path.join(buildPath, "index.html"));
+});
+
 app.listen(port, () => {
   console.log(`Server is running on port ${port}`);
 });

examples/browser-api-playground/src/useAuthProvider.ts

@@ -9,11 +9,6 @@ interface AuthState {
 const defaultAuthState: AuthState = {
 };
 
-const serverBasePath = (() => {
-  const feBasePath = window.location.origin;
-  return feBasePath.replace("3000", "8585");
-})();
-
 const fetchTokenFromServer = async (
   backend: string,
   authOptions: AuthOptions
@@ -22,8 +17,10 @@ const fetchTokenFromServer = async (
     authOptions.type == AuthType.Anonymous
       ? "generateAnonymousAuthToken"
       : "generateAuthToken";
+  // Same-origin relative path: the auth routes are served by the same app as
+  // this UI, so this resolves correctly on localhost, CodeSandbox, and Cloud Run.
   return await new Promise((resolve, reject) =>
-    fetch(`${serverBasePath}/${endpoint}`, {
+    fetch(`/${endpoint}`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",