feat: resolve app template env placeholders

ts_web/elements/ob-view-appstore.ts

@@ -42,6 +42,9 @@ export class ObViewAppStore extends DeesElement {
   @state()
   accessor serviceName: string = '';
 
+  @state()
+  accessor serviceDomain: string = '';
+
   @state()
   accessor loading: boolean = false;
 
@@ -474,6 +477,18 @@ export class ObViewAppStore extends DeesElement {
             Lowercase letters, numbers, and hyphens only.
           </div>
 
+          <div class="section-label" style="margin-top: 18px;">Domain</div>
+          <input
+            class="name-input"
+            type="text"
+            .value=${this.serviceDomain}
+            placeholder="e.g. cloudly.example.com"
+            @input=${(e: Event) => this.handleServiceDomainChange((e.target as HTMLInputElement).value)}
+          />
+          <div style="font-size: 12px; color: var(--ci-shade-4, #71717a); margin-top: 6px;">
+            Optional. When configured, Onebox routes this domain to the deployed app.
+          </div>
+
           <div class="actions-row">
             <button class="btn btn-secondary" @click=${() => { this.currentView = 'grid'; }}>Cancel</button>
             <button class="btn btn-primary" @click=${() => this.handleDeploy()}>
@@ -560,6 +575,7 @@ export class ObViewAppStore extends DeesElement {
         required: ev.required,
         platformInjected: ev.value?.includes('${') || false,
       }));
+      this.serviceDomain = '';
     } catch (err) {
       console.error('Failed to fetch app config:', err);
     }
@@ -571,14 +587,29 @@ export class ObViewAppStore extends DeesElement {
     this.editableEnvVars = updated;
   }
 
+  private handleServiceDomainChange(valueArg: string) {
+    this.serviceDomain = this.normalizeDomain(valueArg);
+  }
+
+  private normalizeDomain(valueArg: string) {
+    return valueArg.trim().replace(/^https?:\/\//, '').replace(/\/$/, '');
+  }
+
   private async handleDeploy() {
     const app = this.selectedApp;
     const config = this.selectedAppConfig;
     if (!app || !config) return;
+    const needsServiceDomain = (config.envVars || []).some((envVarArg) => {
+      return envVarArg.value?.includes('${SERVICE_DOMAIN}');
+    });
+    if (needsServiceDomain && !this.serviceDomain) {
+      console.error('A domain is required for this app.');
+      return;
+    }
 
     const envVars: Record<string, string> = {};
     for (const ev of this.editableEnvVars) {
-      if (ev.key && ev.value && !ev.platformInjected) {
+      if (ev.key && ev.value) {
         envVars[ev.key] = ev.value;
       }
     }
@@ -588,6 +619,7 @@ export class ObViewAppStore extends DeesElement {
       name: this.serviceName || app.id,
       image: config.image,
       port: config.port || 80,
+      domain: this.serviceDomain || undefined,
       envVars,
       enableMongoDB: platformReqs.mongodb || false,
       enableS3: platformReqs.s3 || false,