Publishing - deploying to porter

Author: AryanFP

.github/workflows/porter-mentra-template-app.yml

@@ -0,0 +1,29 @@
+"on":
+    push:
+        branches:
+            - new-template
+name: Deploy to camera-photo-example
+jobs:
+    porter-deploy:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+            - name: Set Github tag
+              id: vars
+              run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+            - name: Setup porter
+              uses: porter-dev/setup-porter@v0.1.0
+            - name: Deploy stack
+              timeout-minutes: 30
+              run: exec porter apply -f ./porter.yaml
+              env:
+                PORTER_APP_NAME: mentra-live-template-app
+                PORTER_CLUSTER: "4689"
+                PORTER_DEPLOYMENT_TARGET_ID: 4a24a192-04c8-421f-8fc2-22db1714fdc0
+                PORTER_HOST: https://dashboard.porter.run
+                PORTER_PR_NUMBER: ${{ github.event.number }}
+                PORTER_PROJECT: "15081"
+                PORTER_REPO_NAME: ${{ github.event.repository.name }}
+                PORTER_TAG: ${{ steps.vars.outputs.sha_short }}
+                PORTER_TOKEN: ${{ secrets.PORTER_APP_15081_4689 }}

docker/Dockerfile

@@ -1,10 +1,24 @@
 FROM oven/bun:latest
 WORKDIR /app
-# Copy package files
+
+# Install Node.js and npm (required for frontend build)
+RUN apt-get update && apt-get install -y nodejs npm && rm -rf /var/lib/apt/lists/*
+
+# Copy root package files
 COPY package.json bun.lock* ./
-# Install dependencies (including dev dependencies for build)
+# Install root dependencies
 RUN bun install
-# Copy the application code
+
+# Copy frontend package files
+COPY src/frontend/package*.json ./src/frontend/
+# Install frontend dependencies
+RUN cd src/frontend && npm install
+
+# Copy the entire application code
 COPY . .
-# Expose the port
+
+# Build the frontend (creates src/frontend/dist)
+RUN cd src/frontend && npm run build
+
+# Expose the port (Porter uses 80)
 EXPOSE 80

package.json

@@ -5,6 +5,9 @@
   "scripts": {
     "start": "bun src/mentra-app/index.ts",
     "dev": "bun --hot src/mentra-app/index.ts",
+    "build:frontend": "cd src/frontend && npm run build",
+    "build": "npm run build:frontend",
+    "start:prod": "npm run build && npm run start",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Aryan Farhang",

porter.yaml

@@ -6,7 +6,7 @@ build:
   context: .
   dockerfile: ./docker/Dockerfile
 services:
-  - name: camera-photo-app
+  - name: mentra-live-template-app
     type: web
     run: bun run start
     port: 80
@@ -16,3 +16,4 @@ services:
       NODE_ENV: ${NODE_ENV}
       PORTER_APP_NAME: ${PORTER_APP_NAME}
       HOST: "0.0.0.0"
+      PORT: "80"

src/mentra-app/index.ts

@@ -73,8 +73,29 @@ class ExampleMentraOSApp extends AppServer {
     const publicPath = path.join(process.cwd(), "src", "public");
     this.getExpressApp().use("/assets", express.static(publicPath + "/assets"));
 
+    // Serve the built React frontend from the same port
+    const frontendDistPath = path.join(process.cwd(), "src", "frontend", "dist");
+    this.getExpressApp().use(express.static(frontendDistPath));
+
     // Set up all web routes (pass our photos map)
     setupWebviewRoutes(this.getExpressApp(), this.photosMap);
+
+    // SPA fallback - serve index.html for all non-API routes
+    // This must be AFTER setupWebviewRoutes to not interfere with API routes
+    this.getExpressApp().get('*', (req: any, res: any) => {
+      // Don't intercept API routes or assets
+      if (req.path.startsWith('/api') || req.path.startsWith('/assets')) {
+        return;
+      }
+
+      // Serve the React app's index.html for all other routes
+      res.sendFile(path.join(frontendDistPath, 'index.html'), (err: any) => {
+        if (err) {
+          console.error('Error serving index.html:', err);
+          res.status(500).send('Frontend build not found. Please run: npm run build:frontend');
+        }
+      });
+    });
   }
 
   // Session Lifecycle - Called when a user opens/closes the app

src/mentra-app/routes/routes.ts

@@ -3,22 +3,26 @@
  * Web Routes Module
  * =============================================================================
  *
- * This module contains all API endpoints and web routes for the photo viewer.
+ * This module contains all API endpoints for the camera application.
  *
  * Routes included:
+ * - GET /api/photo-stream - SSE endpoint for real-time photo updates
+ * - GET /api/transcription-stream - SSE endpoint for real-time transcriptions
+ * - POST /api/play-audio - Play audio to MentraOS glasses
+ * - POST /api/speak - Text-to-speech to MentraOS glasses
+ * - POST /api/stop-audio - Stop audio playback
+ * - GET /api/theme-preference - Get user's theme preference from Simple Storage
+ * - POST /api/theme-preference - Set user's theme preference in Simple Storage
  * - GET /api/latest-photo - Get metadata for the latest photo
  * - GET /api/photo/:requestId - Get the actual photo image data
  * - GET /api/photo-base64/:requestId - Get photo as base64 JSON
- * - GET /api/photo-stream - SSE endpoint for real-time photo updates
- * - GET /webview - Main photo viewer web interface
+ *
+ * Note: The React frontend is served from the root route by index.ts
  *
  * =============================================================================
  */
 
 import { Express, Response } from 'express';
-import { AuthenticatedRequest } from '@mentra/sdk';
-import * as ejs from 'ejs';
-import * as path from 'path';
 import { getThemePreference, setThemePreference } from '../modules/simple-storage';
 
 // Store SSE clients with userId mapping
@@ -473,26 +477,6 @@ export function setupWebviewRoutes(
     });
   });
 
-
-  // Route 4: Main photo viewer web interface
-  app.get('/webview', async (req: any, res: any) => {
-    const userId = (req as AuthenticatedRequest).authUserId;
-
-    if (!userId) {
-      res.status(401).send(`
-        <html>
-          <head><title>Photo Viewer - Not Authenticated</title></head>
-          <body style="font-family: Arial, sans-serif; text-align: center; padding: 50px;">
-            <h1>Please open this page from the MentraOS app</h1>
-          </body>
-        </html>
-      `);
-      return;
-    }
-
-    const templatePath = path.join(process.cwd(), 'views', 'photo-viewer.ejs');
-    const html = await ejs.renderFile(templatePath, {});
-
-    res.send(html);
-  });
+  // Note: The /webview EJS route has been removed.
+  // The React frontend is now served from the root route (/) by the SPA fallback in index.ts
 }