Remix BFF setup (#4807)

* scaffold wip

* update helpers

* scaffold endpoints

* add comment

* use 8002

* liveblocks auth

* remove nginx stuff

* better routes

* move down

* update vars

* don't need ignoring

* remove unneeded

* update deps

* add remix dep, add sample env

* add route

* add readme

* update readme

* fix for local

* restore

* tweak vars

* restore

* backend type

* refactor

* fix indent

* run only on localhost (dev)

* test nudge

* append v1!

* slash

* fix slash

* better naming

* readability

* types

* pin dependencies

* remove nix file

* update eslint-check

* remove eslintrc

* update deps

* remove isMethod

editor/liveblocks.config.ts

@@ -1,6 +1,6 @@
 import { LiveObject, createClient } from '@liveblocks/client'
 import { createRoomContext } from '@liveblocks/react'
-import { getProjectID } from './src/common/env-vars'
+import { UTOPIA_BACKEND, getProjectID, isBackendBFF } from './src/common/env-vars'
 import type { ActiveFrameAction } from './src/components/canvas/commands/set-active-frames-command'
 import {
   type CanvasRectangle,
@@ -9,12 +9,24 @@ import {
 } from './src/core/shared/math-utils'
 import type { RemixPresence } from './src/core/shared/multiplayer'
 import { projectIdToRoomId } from './src/core/shared/multiplayer'
+import { HEADERS } from './src/common/server'
+import urljoin from 'url-join'
 
 export const liveblocksThrottle = 100 // ms
 
+async function authCall(room: string) {
+  const resp = await fetch(urljoin(UTOPIA_BACKEND, 'liveblocks', 'authentication'), {
+    credentials: 'include',
+    method: 'POST',
+    body: JSON.stringify({ room }),
+    headers: HEADERS,
+  })
+  return resp.json()
+}
+
 export const liveblocksClient = createClient({
   throttle: liveblocksThrottle,
-  authEndpoint: '/v1/liveblocks/authentication',
+  authEndpoint: isBackendBFF() ? authCall : '/v1/liveblocks/authentication',
   unstable_fallbackToHTTP: true,
 })
 

editor/package.json

@@ -43,7 +43,7 @@
     "branches": "REACT_APP_ENVIRONMENT_CONFIG=branches REACT_APP_AUTH0_CLIENT_ID=$AUTH0_CLIENT_ID REACT_APP_AUTH0_ENDPOINT=$AUTH0_ENDPOINT REACT_APP_COMMIT_HASH=$UTOPIA_SHA WEBPACK_MODE='branches' NODE_OPTIONS=\"--max_old_space_size=6656 $NODE_OPENSSL_OPTION\" webpack",
     "branches-print-json": "pnpm run branches --  --json=lib/branches-stats.json",
     "preinstall": "npx only-allow pnpm",
-    "eslint-check": "eslint --quiet --ignore-path ./.eslintignore --config ./.eslintrc.js --ext .ts --ext .tsx src ../utopia-api/src ../utopia-vscode-extension/src ../utopia-vscode-common/src ../puppeteer-tests/src ../website-next/",
+    "eslint-check": "eslint --quiet --ignore-path ./.eslintignore --config ./.eslintrc.js --ext .ts --ext .tsx src ../utopia-api/src ../utopia-vscode-extension/src ../utopia-vscode-common/src ../puppeteer-tests/src ../website-next/ ../utopia-remix/",
     "prettier-check": "prettier --ignore-path ../.prettierignore --config ../prettier.config.js --check src/** ../utopia-api/src/**/* ../utopia-vscode-common/src/** ../utopia-vscode-extension/src/** ../puppeteer-tests/src/** ../website-next/pages/** ../website-next/components/**",
     "prettier-fix": "prettier --ignore-path ../.prettierignore --config ../prettier.config.js --write src/** ../utopia-api/src/**/* ../utopia-vscode-common/src/** ../utopia-vscode-extension/src/** ../puppeteer-tests/src/** ../website-next/pages/** ../website-next/components/**",
     "parse-print-analysis": "npx -s sh ts-node --require ignore-styles --transpile-only ./src/scripts/parse-print-analysis.ts",

shell.nix

@@ -494,6 +494,12 @@ let
       cabal-update
       cd $(${pkgs.git}/bin/git rev-parse --show-toplevel)/
       ${pkgs.nodePackages.nodemon}/bin/nodemon --delay 200ms -e hs,yaml --watch server/src --watch server/package.yaml --watch clientmodel/lib/src --watch clientmodel/lib/package.yaml --exec run-server-inner
+    '')
+	(pkgs.writeScriptBin "watch-remix" ''
+      #!/usr/bin/env bash
+      set -e
+      cd $(${pkgs.git}/bin/git rev-parse --show-toplevel)/utopia-remix
+	  PORT=8002 pnpm run dev
     '')
   ];
 
@@ -555,20 +561,22 @@ let
         new-window -n "Scratchpad" \; \
         new-window -n "Server" \; \
         send-keys -t :2 watch-server C-m \; \
+        new-window -n "Remix" \; \
+        send-keys -t :3 watch-remix C-m \; \
         new-window -n "Editor TSC" \; \
-        send-keys -t :3 watch-tsc C-m \; \
+        send-keys -t :4 watch-tsc C-m \; \
         new-window -n "Editor Vite" \; \
-        send-keys -t :4 watch-editor-hmr C-m \; \
+        send-keys -t :5 watch-editor-hmr C-m \; \
         new-window -n "Website" \; \
-        send-keys -t :5 watch-website C-m \; \
+        send-keys -t :6 watch-website C-m \; \
         new-window -n "VSCode Common" \; \
-        send-keys -t :6 watch-utopia-vscode-common C-m \; \
+        send-keys -t :7 watch-utopia-vscode-common C-m \; \
         new-window -n "VSCode Extension" \; \
-        send-keys -t :7 watch-utopia-vscode-extension C-m \; \
+        send-keys -t :8 watch-utopia-vscode-extension C-m \; \
         new-window -n "VSCode Pull Extension" \; \
-        send-keys -t :8 watch-vscode-build-extension-only C-m \; \
+        send-keys -t :9 watch-vscode-build-extension-only C-m \; \
         new-window -n "PostgreSQL" \; \
-        send-keys -t :9 start-postgres C-m \; \
+        send-keys -t :10 start-postgres C-m \; \
         select-window -t :1 \;
     '')
     (pkgs.writeScriptBin "start-full" ''
@@ -597,20 +605,22 @@ let
         new-window -n "Scratchpad" \; \
         new-window -n "Server" \; \
         send-keys -t :2 watch-server C-m \; \
+        new-window -n "Remix" \; \
+        send-keys -t :3 watch-remix C-m \; \
         new-window -n "Editor TSC" \; \
-        send-keys -t :3 watch-tsc C-m \; \
+        send-keys -t :4 watch-tsc C-m \; \
         new-window -n "Editor Webpack" \; \
-        send-keys -t :4 watch-editor-cowboy C-m \; \
+        send-keys -t :5 watch-editor-cowboy C-m \; \
         new-window -n "Website" \; \
-        send-keys -t :5 watch-website C-m \; \
+        send-keys -t :6 watch-website C-m \; \
         new-window -n "VSCode Common" \; \
-        send-keys -t :6 watch-utopia-vscode-common C-m \; \
+        send-keys -t :7 watch-utopia-vscode-common C-m \; \
         new-window -n "VSCode Extension" \; \
-        send-keys -t :7 watch-utopia-vscode-extension C-m \; \
+        send-keys -t :8 watch-utopia-vscode-extension C-m \; \
         new-window -n "VSCode Pull Extension" \; \
-        send-keys -t :8 watch-vscode-build-extension-only C-m \; \
+        send-keys -t :9 watch-vscode-build-extension-only C-m \; \
         new-window -n "PostgreSQL" \; \
-        send-keys -t :9 start-postgres C-m \; \
+        send-keys -t :10 start-postgres C-m \; \
         select-window -t :1 \;
     '')
     (pkgs.writeScriptBin "start-full-webpack" ''

utopia-remix/.env.sample

@@ -0,0 +1,2 @@
+CORS_ORIGIN="http://localhost:8000"
+BACKEND_URL="http://localhost:8001"

utopia-remix/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
+vegeta

utopia-remix/app/env.server.ts

@@ -0,0 +1,6 @@
+export const ServerEnvironment = {
+  // The URL of the actual backend server in the form <scheme>://<host>:<port>
+  BackendURL: process.env.BACKEND_URL ?? "",
+  // the CORS allowed origin for incoming requests
+  CORSOrigin: process.env.CORS_ORIGIN ?? "",
+};

utopia-remix/app/root.tsx

@@ -0,0 +1,33 @@
+import { cssBundleHref } from "@remix-run/css-bundle";
+import type { LinksFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export const links: LinksFunction = () => [
+  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+];
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}

utopia-remix/app/routes/_index.tsx

@@ -0,0 +1,13 @@
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [{ title: "Utopia" }];
+};
+
+export default function Index() {
+  return (
+    <div>
+      <div>Welcome to Utopia</div>
+    </div>
+  );
+}

utopia-remix/app/routes/v1.asset.$id.assets.$name.tsx

@@ -0,0 +1,15 @@
+import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+  });
+}
+
+export async function action(args: ActionFunctionArgs) {
+  return handle(args.request, {
+    POST: (req) => proxy(req, { rawOutput: true }),
+  });
+}

utopia-remix/app/routes/v1.collaboration.tsx

@@ -0,0 +1,15 @@
+import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { handle, handleOptions } from "../util/api.server";
+import { proxy } from "../util/proxy.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+  });
+}
+
+export async function action(args: ActionFunctionArgs) {
+  return handle(args.request, {
+    PUT: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.authentication.finish.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { handle, handleOptions } from "../util/api.server";
+import { proxy } from "../util/proxy.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.authentication.start.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { handle, handleOptions } from "../util/api.server";
+import { proxy } from "../util/proxy.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.authentication.status.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { handle, handleOptions } from "../util/api.server";
+import { proxy } from "../util/proxy.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.branches.$owner.$repository.asset.$assetSha.tsx

@@ -0,0 +1,15 @@
+import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { handle, handleOptions } from "../util/api.server";
+import { proxy } from "../util/proxy.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+  });
+}
+
+export async function action(args: ActionFunctionArgs) {
+  return handle(args.request, {
+    POST: (req) => proxy(req, { rawOutput: true }),
+  });
+}

utopia-remix/app/routes/v1.github.branches.$owner.$repository.branch.$branchName.pullrequest.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { handle, handleOptions } from "../util/api.server";
+import { proxy } from "../util/proxy.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.branches.$owner.$repository.branch.$branchName.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.branches.$owner.$repository.branch.default-branch.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.branches.$owner.$repository.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.save.$projectId.tsx

@@ -0,0 +1,15 @@
+import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+  });
+}
+
+export async function action(args: ActionFunctionArgs) {
+  return handle(args.request, {
+    POST: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.user.repositories.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.github.user.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.javascript.package.versions.$name.$version.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { handle, handleOptions } from "../util/api.server";
+import { proxy } from "../util/proxy.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.liveblocks.authentication.tsx

@@ -0,0 +1,15 @@
+import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+  });
+}
+
+export async function action(args: ActionFunctionArgs) {
+  return handle(args.request, {
+    POST: proxy,
+  });
+}

utopia-remix/app/routes/v1.liveblocks.enabled.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}

utopia-remix/app/routes/v1.project.$id.metadata.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { proxy } from "../util/proxy.server";
+import { handle, handleOptions } from "../util/api.server";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args.request, {
+    OPTIONS: handleOptions,
+    GET: proxy,
+  });
+}