feat(dashboard): enabling multi region setup from single dashboard and clerk

.github/workflows/deploy.yml

@@ -15,37 +15,42 @@ description: |
   It builds Docker images, pushes them to Amazon ECR, and deploys them to Amazon ECS.
   Additionally, it creates Sentry releases and New Relic deployment markers.
 
+env:
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
 on:
   workflow_dispatch:
     inputs:
       environment:
-        description: 'Environment to deploy to'
+        description: "Environment to deploy to"
         required: true
         type: choice
         default: staging
         options:
           - staging
+          - staging-apse1
           - production-us
           - production-eu
-          - production-both
+          - production-apse1
+          - production-us-and-eu
 
       deploy_api:
-        description: 'Deploy API'
+        description: "Deploy API"
         required: true
         type: boolean
         default: true
       deploy_worker:
-        description: 'Deploy Worker'
+        description: "Deploy Worker"
         required: true
         type: boolean
         default: false
       deploy_ws:
-        description: 'Deploy WS'
+        description: "Deploy WS"
         required: true
         type: boolean
         default: false
       deploy_webhook:
-        description: 'Deploy Webhook'
+        description: "Deploy Webhook"
         required: true
         type: boolean
         default: false
@@ -84,13 +89,19 @@ jobs:
           if [ "${{ github.event.inputs.environment }}" == "staging" ]; then
             envs+=("\"staging-eu\"")
           fi
+          if [ "${{ github.event.inputs.environment }}" == "staging-apse1" ]; then
+            envs+=("\"staging-apse1\"")
+          fi
           if [ "${{ github.event.inputs.environment }}" == "production-us" ]; then
             envs+=("\"prod-us\"")
           fi
           if [ "${{ github.event.inputs.environment }}" == "production-eu" ]; then
             envs+=("\"prod-eu\"")
           fi
-          if [ "${{ github.event.inputs.environment }}" == "production-both" ]; then
+          if [ "${{ github.event.inputs.environment }}" == "production-apse1" ]; then
+            envs+=("\"prod-apse1\"")
+          fi
+          if [ "${{ github.event.inputs.environment }}" == "production-us-and-eu" ]; then
             envs+=("\"prod-us\"")
             envs+=("\"prod-eu\"")
           fi
@@ -121,7 +132,28 @@ jobs:
                 service_name=$(echo "$worker_service" | jq -r '.service')
                 task_name=$(echo "$worker_service" | jq -r '.task_name')
                 image=$(echo "$worker_service" | jq -r '.image')
-                deploy_matrix+=("{\"cluster_name\": \"$cluster_name\", \"container_name\": \"$container_name\", \"service_name\": \"$service_name\", \"task_name\": \"$task_name\", \"image\": \"$image\"}")
+
+                # Check if service has environments filter, otherwise deploy to all
+                allowed_envs=$(echo "$worker_service" | jq -r '.environments // empty')
+                should_deploy=false
+
+                if [ -z "$allowed_envs" ]; then
+                  # No environment filter, deploy to all environments
+                  should_deploy=true
+                else
+                  # Check if any of the selected environments match the allowed environments
+                  for env in "${envs[@]}"; do
+                    env_clean=$(echo "$env" | tr -d '"')
+                    if echo "$allowed_envs" | jq -e --arg env "$env_clean" 'index($env) != null' > /dev/null; then
+                      should_deploy=true
+                      break
+                    fi
+                  done
+                fi
+
+                if [ "$should_deploy" == "true" ]; then
+                  deploy_matrix+=("{\"cluster_name\": \"$cluster_name\", \"container_name\": \"$container_name\", \"service_name\": \"$service_name\", \"task_name\": \"$task_name\", \"image\": \"$image\"}")
+                fi
               done
             elif [ "$service" == "\"api\"" ]; then
               for api_service in $(echo "$API_SERVICE" | jq -c '.[]'); do
@@ -130,7 +162,28 @@ jobs:
                 service_name=$(echo "$api_service" | jq -r '.service')
                 task_name=$(echo "$api_service" | jq -r '.task_name')
                 image=$(echo "$api_service" | jq -r '.image')
-                deploy_matrix+=("{\"cluster_name\": \"$cluster_name\", \"container_name\": \"$container_name\", \"service_name\": \"$service_name\", \"task_name\": \"$task_name\", \"image\": \"$image\"}")
+
+                # Check if service has environments filter, otherwise deploy to all
+                allowed_envs=$(echo "$api_service" | jq -r '.environments // empty')
+                should_deploy=false
+
+                if [ -z "$allowed_envs" ]; then
+                  # No environment filter, deploy to all environments
+                  should_deploy=true
+                else
+                  # Check if any of the selected environments match the allowed environments
+                  for env in "${envs[@]}"; do
+                    env_clean=$(echo "$env" | tr -d '"')
+                    if echo "$allowed_envs" | jq -e --arg env "$env_clean" 'index($env) != null' > /dev/null; then
+                      should_deploy=true
+                      break
+                    fi
+                  done
+                fi
+
+                if [ "$should_deploy" == "true" ]; then
+                  deploy_matrix+=("{\"cluster_name\": \"$cluster_name\", \"container_name\": \"$container_name\", \"service_name\": \"$service_name\", \"task_name\": \"$task_name\", \"image\": \"$image\"}")
+                fi
               done
             elif [ "$service" == "\"ws\"" ]; then
               cluster_name=ws-cluster
@@ -192,8 +245,8 @@ jobs:
       - name: Setup Node Version
         uses: actions/setup-node@v4
         with:
-          node-version: '20.19.0'
-          cache: 'pnpm'
+          node-version: "20.19.0"
+          cache: "pnpm"
 
       - name: Install Dependencies
         shell: bash
@@ -202,7 +255,7 @@ jobs:
       - name: Set Up Docker Buildx
         uses: docker/setup-buildx-action@v3
         with:
-          driver-opts: 'image=moby/buildkit:v0.13.1'
+          driver-opts: "image=moby/buildkit:v0.13.1"
 
       - name: Prepare Variables
         run: echo "BULL_MQ_PRO_NPM_TOKEN=${{ secrets.BULL_MQ_PRO_NPM_TOKEN }}" >> $GITHUB_ENV
@@ -303,7 +356,7 @@ jobs:
           SENTRY_ORG: ${{ vars.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ matrix.service }}
         with:
-          version: '${{ github.sha }}'
+          version: "${{ github.sha }}"
           version_prefix: v
           environment: ${{vars.SENTRY_ENV}}
           ignore_empty: true
@@ -326,9 +379,9 @@ jobs:
           region: EU
           apiKey: ${{ secrets.NEW_RELIC_API_KEY }}
           guid: ${{ matrix.nr == 'api' && secrets.NEW_RELIC_API_GUID || matrix.nr == 'worker' && secrets.NEW_RELIC_Worker_GUID }}
-          version: '${{ github.sha }}'
-          user: '${{ github.actor }}'
-          description: 'Novu Cloud Deployment'
+          version: "${{ github.sha }}"
+          user: "${{ github.actor }}"
+          description: "Novu Cloud Deployment"
 
   sync_novu_state:
     needs: [deploy, prepare-matrix]
@@ -350,22 +403,21 @@ jobs:
       needs.deploy.result == 'success' && 
       (contains(github.event.inputs.environment, 'production'))
     environment: ${{ fromJson(needs.prepare-matrix.outputs.env_matrix).environment[0] }}
-
     steps:
       - name: Send webhook notification for US production
         if: |
           github.event.inputs.environment == 'production-us' || 
-          github.event.inputs.environment == 'production-both'
+          github.event.inputs.environment == 'production-us-and-eu'
         run: |
           curl -X POST https://webhooks.bug0.com/integrations/test/run \
             -H "Content-Type: application/json" \
             -H "x-api-key: ${{ secrets.BUG0_SECRET_KEY }}" \
             -d '{"url": "https://dashboard.novu.co", "source": "novuhq-novu", "prod": "true"}'
-      
+
       - name: Send webhook notification for EU production
         if: |
           github.event.inputs.environment == 'production-eu' || 
-          github.event.inputs.environment == 'production-both'
+          github.event.inputs.environment == 'production-us-and-eu'
         run: |
           curl -X POST https://webhooks.bug0.com/integrations/test/run \
             -H "Content-Type: application/json" \

apps/api/Dockerfile

@@ -69,4 +69,4 @@ RUN --mount=type=cache,id=pnpm-store-api,target=/root/.pnpm-store\
 ENV NEW_RELIC_NO_CONFIG_FILE=true
 
 WORKDIR /usr/src/app/apps/api
-ENTRYPOINT [ "sh", "-c", "node dist/dotenvcreate.mjs -s=novu/api -r=$NOVU_REGION -e=$NOVU_ENTERPRISE -v=$NODE_ENV -h=$IS_SELF_HOSTED && pm2-runtime start dist/main.js -i max" ]
+ENTRYPOINT [ "sh", "-c", "node dist/dotenvcreate.mjs -s=$SECRET_NAME -r=$NOVU_REGION -e=$NOVU_ENTERPRISE -v=$NODE_ENV -h=$IS_SELF_HOSTED && pm2-runtime start dist/main.js -i max" ]

apps/dashboard/.example.env

@@ -9,3 +9,36 @@ VITE_INTERCOM_APP_ID=
 VITE_GTM=
 VITE_SELF_HOSTED=
 VITE_PLAIN_SUPPORT_CHAT_APP_ID=
+
+# Multi-Region Configuration
+# List of region codes (comma-separated). FIRST region is the base/default region.
+# Use SHORT codes that match your env var suffixes (e.g., 'sg' not 'singapore')
+# The base region uses env vars WITHOUT suffix (VITE_API_HOSTNAME, not VITE_API_HOSTNAME_XX)
+VITE_REGIONS=us,sg
+
+# Base Region - NO suffix required (everything uses base env vars)
+VITE_DASHBOARD_URL=http://localhost:4201
+# VITE_API_HOSTNAME and VITE_WEBSOCKET_HOSTNAME are already defined above
+VITE_AWS_REGION=us-east-1
+# VITE_REGION_NAME=US
+# VITE_REGION_FLAG=🇺🇸
+
+# Additional Region Configuration
+# For each additional region, add variables with _REGIONCODE suffix (uppercase):
+
+# Singapore Region
+VITE_DASHBOARD_URL_SG=http://localhost:4202
+VITE_API_HOSTNAME_SG=http://localhost:3200
+VITE_WEBSOCKET_HOSTNAME_SG=http://localhost:3003
+VITE_AWS_REGION_SG=ap-southeast-1
+VITE_REGION_NAME_SG=Singapore
+VITE_REGION_FLAG_SG=🇸🇬
+
+# To add more regions, follow this pattern:
+# VITE_DASHBOARD_URL_<CODE>=<url>
+# VITE_API_HOSTNAME_<CODE>=<url>
+# VITE_WEBSOCKET_HOSTNAME_<CODE>=<url>
+# VITE_AWS_REGION_<CODE>=<aws-region>
+# VITE_REGION_NAME_<CODE>=<display-name>
+# VITE_REGION_FLAG_<CODE>=<emoji-flag>
+# See MULTI_REGION_SETUP.md for detailed instructions

apps/dashboard/src/api/api.client.ts

@@ -1,7 +1,6 @@
-import type { IEnvironment } from '@novu/shared';
-import { API_HOSTNAME } from '@/config';
+import { apiHostnameManager } from '@/utils/api-hostname-manager';
 import { getToken } from '@/utils/auth';
-
+import { IEnvironment } from '@novu/shared';
 // This is how we import the speakeasy autogenerated Novu SDK that is CJS in a the Dashboard ESM project with Vite
 // Read more at https://github.com/vitejs/vite/issues/5668#issuecomment-968117934
 
@@ -62,7 +61,7 @@ const request = async <T>(
       }
     }
 
-    const baseUrl = API_HOSTNAME ?? 'https://api.novu.co';
+    const baseUrl = apiHostnameManager.getHostname();
     const response = await fetch(`${baseUrl}/${version}${endpoint}`, config);
 
     if (!response.ok) {

apps/dashboard/src/components/auth/create-organization.tsx

@@ -1,5 +1,6 @@
+import { RegionSelector, useRegion } from '@/context/region';
 import { OrganizationList as OrganizationListForm, useOrganization } from '@clerk/clerk-react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useTelemetry } from '../../hooks/use-telemetry';
 import { clerkSignupAppearance } from '../../utils/clerk-appearance';
 import { ROUTES } from '../../utils/routes';
@@ -60,7 +61,41 @@ function FormContainer({ children }: FormContainerProps) {
 }
 
 function OrganizationForm() {
-  return <OrganizationListForm appearance={FORM_APPEARANCE} {...ORGANIZATION_FORM_CONFIG} />;
+  const [showRegionSelector, setShowRegionSelector] = useState(false);
+
+  useEffect(() => {
+    // Watch for DOM changes to detect when we're on the form page (Page 2)
+    const observer = new MutationObserver(() => {
+      // Check if the organization creation form (with name input) is visible
+      const nameInput = document.querySelector('input[name="name"]');
+      const isOnFormPage = !!nameInput;
+
+      if (isOnFormPage !== showRegionSelector) {
+        setShowRegionSelector(isOnFormPage);
+      }
+    });
+
+    // Start observing
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+  }, [showRegionSelector]);
+
+  return (
+    <div className="relative">
+      {/* Region selector - only visible on Page 2 (form page), aligned with form content */}
+      {showRegionSelector && (
+        <div className="absolute -top-14 left-4 z-20">
+          <RegionSelector />
+        </div>
+      )}
+
+      <OrganizationListForm appearance={FORM_APPEARANCE} {...ORGANIZATION_FORM_CONFIG} />
+    </div>
+  );
 }
 
 function OrganizationFormSection() {
@@ -113,6 +148,7 @@ function PageContent() {
 
 export default function OrganizationCreate() {
   const { organization } = useOrganization();
+  const { selectedRegion } = useRegion();
   const track = useTelemetry();
 
   useEffect(() => {
@@ -122,9 +158,10 @@ export default function OrganizationCreate() {
         location: 'web',
         organizationId: organization.id,
         organizationName: organization.name,
+        region: selectedRegion,
       });
     }
-  }, [organization, track]);
+  }, [organization, track, selectedRegion]);
 
   return (
     <div className="flex w-full flex-1 flex-row items-center justify-center">

apps/dashboard/src/components/auth/inbox-preview-content.tsx

@@ -1,6 +1,6 @@
+import { apiHostnameManager } from '@/utils/api-hostname-manager';
 import { useUser } from '@clerk/clerk-react';
 import { Inbox, InboxContent, InboxProps } from '@novu/react';
-import { API_HOSTNAME, WEBSOCKET_HOSTNAME } from '../../config';
 import { useAuth } from '../../context/auth/hooks';
 import { useFetchEnvironments } from '../../context/environment/hooks';
 
@@ -32,8 +32,8 @@ export function InboxPreviewContent() {
   const configuration: InboxProps = {
     applicationIdentifier: currentEnvironment?.identifier,
     subscriberId: user?.externalId as string,
-    backendUrl: API_HOSTNAME ?? 'https://api.novu.co',
-    socketUrl: WEBSOCKET_HOSTNAME ?? 'https://ws.novu.co',
+    backendUrl: apiHostnameManager.getHostname(),
+    socketUrl: apiHostnameManager.getWebSocketHostname(),
     localization: {
       'notifications.emptyNotice': 'Click Send Notification to see your first notification',
     },

apps/dashboard/src/components/confirmation-modal.tsx

@@ -1,6 +1,3 @@
-import { ReactNode } from 'react';
-import { IconType } from 'react-icons';
-import { RiAlertFill } from 'react-icons/ri';
 import { Button } from '@/components/primitives/button';
 import {
   Dialog,
@@ -12,6 +9,9 @@ import {
   DialogPortal,
   DialogTitle,
 } from '@/components/primitives/dialog';
+import { ReactNode } from 'react';
+import { IconType } from 'react-icons';
+import { RiAlertFill } from 'react-icons/ri';
 
 type ConfirmationModalProps = {
   open: boolean;

apps/dashboard/src/components/header-navigation/header-navigation.tsx

@@ -1,11 +1,12 @@
-import { EnvironmentTypeEnum, FeatureFlagsKeysEnum, PermissionsEnum } from '@novu/shared';
-import { HTMLAttributes, ReactNode } from 'react';
-import { RiSearchLine } from 'react-icons/ri';
 import { useCommandPalette } from '@/components/command-palette/hooks/use-command-palette';
 import { InboxButton } from '@/components/inbox-button';
 import { UserProfile } from '@/components/user-profile';
+import { RegionSelector } from '@/context/region/region-selector';
 import { useFeatureFlag } from '@/hooks/use-feature-flag';
 import { cn } from '@/utils/ui';
+import { EnvironmentTypeEnum, FeatureFlagsKeysEnum, PermissionsEnum } from '@novu/shared';
+import { HTMLAttributes, ReactNode } from 'react';
+import { RiSearchLine } from 'react-icons/ri';
 import { IS_ENTERPRISE, IS_SELF_HOSTED } from '../../config';
 import { useEnvironment } from '../../context/environment/hooks';
 import { useHasPermission } from '../../hooks/use-has-permission';
@@ -54,8 +55,10 @@ export const HeaderNavigation = (props: HeaderNavigationProps) => {
         )}
         {!hideBridgeUrl ? <EditBridgeUrlButton /> : null}
         {!(IS_SELF_HOSTED && IS_ENTERPRISE) && <CustomerSupportButton />}
-        <div className="flex pr-0.5">
+        <div className="flex items-center gap-2">
           <InboxButton />
+          <div className="h-4 w-px bg-neutral-200" />
+          <RegionSelector />
         </div>
         <UserProfile />
       </div>