Set up Resource UI deployment to firebase (#1640)

Author: hugo-vrijswijk

.github/workflows/ci.yml

@@ -87,13 +87,13 @@ jobs:
         run: |
           sudo echo "127.0.0.1 navigate.lucuma.xyz" | sudo tee -a /etc/hosts
       - run: pnpm exec playwright install firefox --only-shell
-      - run: pnpm --filter "...@gemini-hlsw/navigate-e2e[origin/main]..." --if-present build
-      - run: pnpm --filter "...@gemini-hlsw/navigate-e2e[origin/main]..." --if-present e2e:docker-up
+      - run: pnpm --filter "...navigate-e2e[origin/main]..." --if-present build
+      - run: pnpm --filter "...navigate-e2e[origin/main]..." --if-present e2e:docker-up
         env:
           LUCUMA_REFRESH_TOKEN: ${{ secrets.LUCUMA_DEV_API_KEY }}
 
       - name: Run Playwright tests
-        run: pnpm --filter "...@gemini-hlsw/navigate-e2e[origin/main]..." --if-present test:e2e
+        run: pnpm --filter "...navigate-e2e[origin/main]..." --if-present test:e2e
         env:
           LUCUMA_REFRESH_TOKEN: ${{ secrets.LUCUMA_DEV_API_KEY }}
           DATABASE_URL: 'postgresql://jimmy:banana@127.0.0.1:5432/configs'
@@ -265,3 +265,32 @@ jobs:
         env:
           HEROKU_API_KEY: ${{ secrets.HEROKU_API_KEY }}
         run: ./deploy/deploy-heroku.sh
+
+  deploy-resource:
+    runs-on: ubuntu-latest
+    if: (github.ref == 'refs/heads/main' && github.repository_owner == 'gemini-hlsw')
+    timeout-minutes: 10
+    environment:
+      name: resource-ui-dev
+      url: 'https://resource-dev.lucuma.xyz'
+    steps:
+      - uses: actions/checkout@v6
+      - uses: ./.github/setup
+        with:
+          only-changed: true
+          FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
+      - run: pnpm --filter "...resource-ui[origin/main]..." --if-present build
+
+      # Set env.DEPLOY_RESOURCE if there are changes
+      - run: pnpm --filter "...resource-ui[origin/main]..." --if-present ci:set-deploy-flag
+
+      - name: Deploy staging app to Firebase
+        if: env.DEPLOY_RESOURCE == 'true'
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
+          projectId: ${{ vars.FIREBASE_PROJECT_ID }}
+          entryPoint: ./packages/resource-ui
+          target: dev
+          channelId: live

.gitignore

@@ -7,13 +7,16 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+firebase-debug.log*
+firebase-debug.*.log*
 
 node_modules
 dist
 dist-ssr
 *.tsbuildinfo
 *.local
 pruned
+.firebase/
 
 # Editor directories and files
 .idea

packages/common-ui/src/functions.ts

@@ -99,3 +99,13 @@ export function parseNumber<T extends number | string>(
 ): T extends undefined ? number | undefined : number {
   return typeof value === 'string' ? parseFloat(value) : (value as T extends undefined ? number | undefined : number);
 }
+
+/**
+ * Converts a relative URI to an absolute URI based on the current window origin.
+ */
+export const withAbsoluteUri = (uri: string, isWs = false) => {
+  if (!uri.startsWith('/')) return uri;
+
+  const newUri = window.location.origin + uri;
+  return isWs ? newUri.replace(/^http/, 'ws') : newUri;
+};

packages/resource-ui/.firebaserc

@@ -0,0 +1,14 @@
+{
+  "projects": {
+    "default": "resource-ae0b7"
+  },
+  "targets": {
+    "resource-ae0b7": {
+      "hosting": {
+        "dev": ["resource-ae0b7-dev"],
+        "staging": ["resource-ae0b7-staging"],
+        "production": ["resource-ae0b7"]
+      }
+    }
+  }
+}

packages/resource-ui/firebase.json

@@ -0,0 +1,37 @@
+{
+  "hosting": [
+    {
+      "target": "dev",
+      "public": "dist",
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    },
+    {
+      "target": "staging",
+      "public": "dist",
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    },
+    {
+      "target": "production",
+      "public": "dist",
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    }
+  ]
+}

packages/resource-ui/package.json

@@ -14,6 +14,7 @@
     "dev:mock-server": "node --watch --enable-source-maps ./mock-server/server.ts",
     "codegen": "graphql-codegen --config tasks/codegen.ts",
     "codegen:mock": "graphql-codegen --config tasks/codegen.mock.ts",
+    "ci:set-deploy-flag": "echo \"DEPLOY_RESOURCE=true\" >> \"$GITHUB_ENV\"",
     "prebuild": "pnpm run codegen",
     "test": "vitest run",
     "build": "tsc -b && vite build",

packages/resource-ui/src/gql/ApolloConfigs.ts

@@ -1,9 +1,28 @@
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { withAbsoluteUri } from '@gemini-hlsw/lucuma-common-ui';
+
+const graphqlEndpoints = {
+  'resource-ae0b7-dev.web.app': 'https://lucuma-resource-dev.lucuma.xyz/resource/graphql',
+  'resource-dev.lucuma.xyz': 'https://lucuma-resource-dev.lucuma.xyz/resource/graphql',
+  localhost: '/resource/graphql',
+
+  'resource-ae0b7-staging.web.app': 'https://lucuma-resource-staging.lucuma.xyz/resource/graphql',
+  'resource-staging.lucuma.xyz': 'https://lucuma-resource-staging.lucuma.xyz/resource/graphql',
+
+  'resource-ae0b7.web.app': 'https://lucuma-resource-dev.lucuma.xyz/resource/graphql',
+  'resource.gemini.edu': 'https://lucuma-resource-dev.lucuma.xyz/resource/graphql',
+} satisfies Record<string, string>;
+
+const defaultGraphqlEndpoint = graphqlEndpoints.localhost;
+
+const uri = graphqlEndpoints[window.location.hostname as keyof typeof graphqlEndpoints] ?? defaultGraphqlEndpoint;
 
 // Create an Apollo Client instance with the specified GraphQL endpoint and cache configuration.
 export const client = new ApolloClient({
-  link: new HttpLink({
-    uri: '/resource/graphql',
-  }),
+  clientAwareness: {
+    name: 'resource-ui',
+    version: import.meta.env.FRONTEND_VERSION,
+  },
+  link: new HttpLink({ uri: withAbsoluteUri(uri) }),
   cache: new InMemoryCache(),
 });

packages/resource-ui/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+// Extra variables that will be replaced by Vite in the build process, defined in vite.config.ts
+interface ImportMetaEnv {
+  readonly FRONTEND_VERSION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

packages/resource-ui/vite.config.ts

@@ -2,10 +2,29 @@ import babel from '@rolldown/plugin-babel';
 import tailwindcss from '@tailwindcss/vite';
 import react, { reactCompilerPreset } from '@vitejs/plugin-react';
 import { playwright } from '@vitest/browser-playwright';
+import { execSync } from 'child_process';
 import { defineConfig } from 'vitest/config';
 
+import pkgJson from './package.json' with { type: 'json' };
+
+const version = (process.env.GITHUB_REF_NAME || `v${pkgJson.version}`).trim();
+const commitHash = (process.env.GITHUB_SHA || execSync('git rev-parse --short HEAD').toString()).trim().slice(0, 7);
+
+const buildTime = new Date();
+function formatDate(date: Date) {
+  const years = date.getFullYear();
+  // Months are 0-indexed
+  const months = date.getMonth() + 1;
+  const days = date.getDate();
+  return `${years}${months.toString().padStart(2, '0')}${days.toString().padStart(2, '0')}`;
+}
+const frontendVersion = `${version}+${formatDate(buildTime)}.${commitHash}`;
+
 // https://vite.dev/config/
 export default defineConfig({
+  define: {
+    'import.meta.env.FRONTEND_VERSION': JSON.stringify(frontendVersion),
+  },
   css: {
     transformer: 'lightningcss',
     lightningcss: {
@@ -28,6 +47,7 @@ export default defineConfig({
     tailwindcss(),
   ],
   server: {
+    allowedHosts: ['localhost', '.lucuma.xyz', '.gemini.edu'],
     proxy: {
       '/resource/graphql': {
         target: 'https://lucuma-resource-dev.lucuma.xyz',

packages/ui/src/gql/ApolloConfigs.ts

@@ -11,6 +11,7 @@ import {
 import { SetContextLink } from '@apollo/client/link/context';
 import { ErrorLink } from '@apollo/client/link/error';
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+import { withAbsoluteUri } from '@gemini-hlsw/lucuma-common-ui';
 import { OperationTypeNode } from 'graphql/language';
 import { createClient as createWsClient } from 'graphql-ws';
 
@@ -20,16 +21,6 @@ import { wsIsConnectedAtom } from '@/components/atoms/connection';
 import { store } from '@/components/atoms/store';
 import { toastAtom } from '@/Helpers/toast';
 
-/**
- * Converts a relative URI to an absolute URI based on the current window origin.
- */
-const withAbsoluteUri = (uri: string, isWs = false) => {
-  if (!uri.startsWith('/')) return uri;
-
-  const newUri = window.location.origin + uri;
-  return isWs ? newUri.replace(/^http/, 'ws') : newUri;
-};
-
 const navigateServerURI = withAbsoluteUri('/navigate/graphql');
 const navigateServerWsURI = withAbsoluteUri('/navigate/ws', true);
 const navigateConfigsURI = withAbsoluteUri('/db');