fix(webapp): remove need for env

.github/workflows/build-images.yaml

@@ -24,9 +24,8 @@ jobs:
         secrets: inherit
         with:
             package: server
-            run-cmd: build:staging
+            run-cmd: build:prod
             tags: -t nangohq/nango-server:staging-${{ github.event.pull_request.head.sha || github.sha }}
-
     nango-server-prod:
         if: github.ref == 'refs/heads/master'
         uses: ./.github/workflows/push-container.yaml
@@ -49,5 +48,5 @@ jobs:
         secrets: inherit
         with:
             package: server
-            run-cmd: build:enterprise
+            run-cmd: build:prod
             tags: -t nangohq/nango-server:enterprise -t nangohq/nango-server:enterprise-${{ github.event.pull_request.head.sha || github.sha }}

Dockerfile

@@ -54,10 +54,6 @@ RUN true \
 
 # /!\ Do not set NODE_ENV=production before building, it will break some modules
 # ENV NODE_ENV=production
-ARG image_env
-
-# TODO: remove this, it's only needed for the frontend
-ENV REACT_APP_ENV $image_env
 
 # Build the frontend
 RUN true \
@@ -99,12 +95,10 @@ WORKDIR /app/nango
 # COPY --from=build --chown=node:node /app/tmp /app/nango
 COPY --from=build /app/tmp /app/nango
 
-ARG image_env
 ARG git_hash
 
 ENV PORT=8080
 ENV NODE_ENV=production
-ENV IMAGE_ENV $image_env
 ENV GIT_HASH $git_hash
 ENV SERVER_RUN_MODE=DOCKERIZED
 

package.json

@@ -17,21 +17,16 @@
         "ts-build:docker": "tsc -b tsconfig.docker.json",
         "ts-clean": "npx rimraf packages/*/tsconfig.tsbuildinfo packages/*/dist",
         "docker-build": "docker build -f packages/server/Dockerfile -t nango-server:latest .",
-        "webapp-build:hosted": "cd ./packages/webapp && npm run build:hosted && cd ../..",
-        "webapp-build:staging": "cd ./packages/webapp && npm run build:staging && cd ../..",
-        "webapp-build:prod": "cd ./packages/webapp && npm run build:prod && cd ../..",
-        "webapp-build:enterprise": "cd ./packages/webapp && npm run build:enterprise && cd ../..",
+        "webapp-build": "cd ./packages/webapp && npm run build && cd ../..",
         "webapp-build:watch": "tsc -b -w packages/webapp/tsconfig.json",
         "docker-build:unified": "./scripts/build_docker.sh",
-        "build:hosted": "npm ci && npm run ts-build && npm run webapp-build:hosted && npm run connect-ui:build",
-        "build:staging": "npm ci && npm run ts-build && npm run webapp-build:staging",
-        "build:prod": "npm ci && npm run ts-build && npm run webapp-build:prod",
-        "build:enterprise": "npm ci && npm run ts-build && npm run webapp-build:enterprise",
+        "build:hosted": "npm ci && npm run ts-build && npm run webapp-build && npm run connect-ui:build",
+        "build:prod": "npm ci && npm run ts-build && npm run webapp-build",
         "server:dev:watch": "cd ./packages/server && npm run dev",
         "jobs:dev:watch": "npm run dev -w @nangohq/nango-jobs",
         "persist:dev:watch": "npm run dev -w @nangohq/nango-persist",
         "orchestrator:dev:watch": "npm run dev -w @nangohq/nango-orchestrator",
-        "webapp:dev:watch": "cd ./packages/webapp && npm run start:local",
+        "webapp:dev:watch": "cd ./packages/webapp && npm run start",
         "connect-ui:dev:watch": "cd ./packages/connect-ui && npm run dev",
         "connect-ui:build": "npm run -w @nangohq/connect-ui build",
         "prepare": "husky install",

packages/server/lib/controllers/v1/getEnvJs.ts

@@ -1,4 +1,4 @@
-import { basePublicUrl, baseUrl, connectUrl, flagHasAuth, flagHasManagedAuth, flagHasScripts, isCloud } from '@nangohq/utils';
+import { basePublicUrl, baseUrl, connectUrl, flagHasAuth, flagHasManagedAuth, flagHasScripts, flagHasSlack, isCloud } from '@nangohq/utils';
 import { asyncWrapper } from '../../utils/asyncWrapper.js';
 import type { WindowEnv } from '@nangohq/types';
 import { envs } from '@nangohq/logs';
@@ -20,7 +20,8 @@ export const getEnvJs = asyncWrapper<any, any>((_, res) => {
             scripts: flagHasScripts,
             auth: flagHasAuth,
             managedAuth: flagHasManagedAuth,
-            gettingStarted: true
+            gettingStarted: true,
+            slack: flagHasSlack
         }
     };
     res.setHeader('content-type', 'text/javascript');

packages/types/lib/web/env.ts

@@ -15,5 +15,6 @@ export interface WindowEnv {
         auth: boolean;
         managedAuth: boolean;
         gettingStarted: boolean;
+        slack: boolean;
     };
 }

packages/utils/lib/environment/detection.ts

@@ -25,3 +25,4 @@ export const flagHasManagedAuth =
     process.env['FLAG_MANAGED_AUTH_ENABLED'] === 'true' && Boolean(process.env['WORKOS_API_KEY'] && process.env['WORKOS_CLIENT_ID']);
 export const flagHasAPIRateLimit = process.env['FLAG_API_RATE_LIMIT_ENABLED'] !== 'false';
 export const flagHasBigQuery = process.env['FLAG_BIG_QUERY_EXPORT_ENABLED'] === 'true';
+export const flagHasSlack = !isHosted;

packages/webapp/package.json

@@ -6,16 +6,7 @@
         "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
         "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
         "test": "DISABLE_ESLINT_PLUGIN=true react-scripts test",
-        "eject": "DISABLE_ESLINT_PLUGIN=true react-scripts eject",
-        "start:hosted": "env-cmd -f .env.hosted npm run start",
-        "start:local": "env-cmd -f .env.local npm run start",
-        "start:staging": "env-cmd -f .env.staging npm run start",
-        "start:prod": "env-cmd -f .env.prod npm run start",
-        "build:hosted": "env-cmd -f .env.hosted npm run build",
-        "build:local": "env-cmd -f .env.local npm run build",
-        "build:enterprise": "env-cmd -f .env.enterprise npm run build",
-        "build:staging": "env-cmd -f .env.staging npm run build",
-        "build:prod": "env-cmd -f .env.prod npm run build"
+        "eject": "DISABLE_ESLINT_PLUGIN=true react-scripts eject"
     },
     "browserslist": {
         "production": [

packages/webapp/src/env.d.ts

@@ -6,7 +6,6 @@ declare global {
     namespace NodeJS {
         interface ProcessEnv {
             PORT: string;
-            REACT_APP_ENV: 'development' | 'staging' | 'production' | 'hosted' | 'enterprise';
         }
     }
 }

packages/webapp/src/pages/Connection/CreateLegacy.tsx

@@ -9,7 +9,7 @@ import { Tooltip } from '@geist-ui/core';
 import type { Integration } from '@nangohq/server';
 
 import useSet from '../../hooks/useSet';
-import { isHosted, isStaging, baseUrl } from '../../utils/utils';
+import { isCloudProd } from '../../utils/utils';
 import { useGetIntegrationListAPI, useGetHmacAPI } from '../../utils/api';
 import { useAnalyticsTrack } from '../../utils/analytics';
 import DashboardLayout from '../../layout/DashboardLayout';
@@ -22,6 +22,7 @@ import type { AuthModeType } from '@nangohq/types';
 import { useEnvironment } from '../../hooks/useEnvironment';
 import { Helmet } from 'react-helmet';
 import { useSearchParam } from 'react-use';
+import { globalEnv } from '../../utils/env';
 
 export const ConnectionCreateLegacy: React.FC = () => {
     const { mutate } = useSWRConfig();
@@ -108,7 +109,7 @@ export const ConnectionCreateLegacy: React.FC = () => {
         if (environmentAndAccount) {
             const { environment, host } = environmentAndAccount;
             setPublicKey(environment.public_key);
-            setHostUrl(host || baseUrl());
+            setHostUrl(host || globalEnv.apiUrl);
             setWebsocketsPath(environment.websockets_path || '');
             setIsHmacEnabled(Boolean(environment.hmac_key));
         }
@@ -336,7 +337,7 @@ export const ConnectionCreateLegacy: React.FC = () => {
     const snippet = () => {
         const args = [];
 
-        if (isStaging() || isHosted()) {
+        if (!isCloudProd()) {
             args.push(`host: '${hostUrl}'`);
             if (websocketsPath && websocketsPath !== '/') {
                 args.push(`websocketsPath: '${websocketsPath}'`);

packages/webapp/src/pages/Connection/Show.tsx

@@ -14,7 +14,6 @@ import { Button } from '../../components/ui/button/Button';
 import { useEnvironment } from '../../hooks/useEnvironment';
 import { Syncs } from './Syncs';
 import { Authorization } from './Authorization';
-import { isHosted } from '../../utils/utils';
 import { connectSlack } from '../../utils/slack-connection';
 
 import { useStore } from '../../store';
@@ -29,6 +28,7 @@ import { useToast } from '../../hooks/useToast';
 import { useListIntegration } from '../../hooks/useIntegration';
 import { EndUserProfile } from './components/EndUserProfile';
 import { getConnectionDisplayName } from '../../utils/endUser';
+import { globalEnv } from '../../utils/env';
 
 export enum Tabs {
     Syncs,
@@ -68,7 +68,7 @@ export const ConnectionShow: React.FC = () => {
         if (location.hash === '#models' || location.hash === '#syncs') {
             setActiveTab(Tabs.Syncs);
         }
-        if (location.hash === '#authorization' || isHosted()) {
+        if (location.hash === '#authorization' || !globalEnv.features.scripts) {
             setActiveTab(Tabs.Authorization);
         }
     }, [location]);
@@ -237,7 +237,7 @@ export const ConnectionShow: React.FC = () => {
                 </ul>
             </section>
 
-            {!slackIsConnected && !isHosted() && showSlackBanner && (
+            {!slackIsConnected && globalEnv.features.slack && showSlackBanner && (
                 <Info
                     className="mt-6"
                     onClose={() => setShowSlackBanner(false)}

packages/webapp/src/pages/Environment/Settings.tsx

@@ -16,7 +16,7 @@ import {
     apiFetch
 } from '../../utils/api';
 import IntegrationLogo from '../../components/ui/IntegrationLogo';
-import { isHosted, defaultCallback } from '../../utils/utils';
+import { defaultCallback } from '../../utils/utils';
 import DashboardLayout from '../../layout/DashboardLayout';
 import { LeftNavBarItems } from '../../components/LeftNavBar';
 import SecretInput from '../../components/ui/input/SecretInput';
@@ -691,10 +691,10 @@ export const EnvironmentSettings: React.FC = () => {
                                 )}
                             </div>
                         </div>
-                        {!isHosted() && (
+                        {globalEnv.features.slack && (
                             <div className="flex items-center justify-between mx-8 mt-8">
                                 <div>
-                                    <label htmlFor="slack_alerts" className="flex text-text-light-gray items-center block text-sm font-semibold mb-2">
+                                    <label htmlFor="slack_alerts" className="flex text-text-light-gray items-center text-sm font-semibold mb-2">
                                         Slack Alerts
                                         <Tooltip
                                             text={

packages/webapp/src/utils/language-snippets.tsx

@@ -2,10 +2,11 @@ import type { NangoModel, NangoSyncEndpointV2 } from '@nangohq/types';
 import type { TargetId } from 'httpsnippet-lite';
 import { HTTPSnippet } from 'httpsnippet-lite';
 import type { NangoSyncModel } from '../types';
-import { isProd } from './utils';
 import { modelToString } from './scripts';
 
-const maskedKey = '<secret-key-from-environment-settings>';
+function maskSecret(secret: string): string {
+    return `${secret.substring(0, 4)}${'*'.repeat(secret.length - 4)}`;
+}
 
 export function nodeSyncSnippet({
     modelName,
@@ -18,10 +19,8 @@ export function nodeSyncSnippet({
     connectionId: string;
     providerConfigKey: string;
 }) {
-    const secretKeyDisplay = isProd() ? maskedKey : secretKey;
-
     return `import { Nango } from '@nangohq/node';
-const nango = new Nango({ secretKey: '${secretKeyDisplay}' });
+const nango = new Nango({ secretKey: '${maskSecret(secretKey)}' });
 
 const records = await nango.listRecords({
     providerConfigKey: '${providerConfigKey}',
@@ -44,10 +43,8 @@ export function nodeActionSnippet({
     providerConfigKey: string;
     input?: NangoModel | NangoSyncModel;
 }) {
-    const secretKeyDisplay = isProd() ? maskedKey : secretKey;
-
     let snippet = `import Nango from '@nangohq/node';
-const nango = new Nango({ secretKey: '${secretKeyDisplay}' });
+const nango = new Nango({ secretKey: '${maskSecret(secretKey)}' });
 
 const response = await nango.triggerAction(
     '${providerConfigKey}',
@@ -80,13 +77,11 @@ export async function httpSnippet({
     language: TargetId;
     input?: NangoModel | NangoSyncModel | undefined;
 }) {
-    const secretKeyDisplay = isProd() ? maskedKey : secretKey;
-
     const snippet = new HTTPSnippet({
         method: endpoint.method,
         url: `${baseUrl}/v1${endpoint.path}`,
         headers: [
-            { name: 'Authorization', value: `Bearer ${secretKeyDisplay}` },
+            { name: 'Authorization', value: `Bearer ${maskSecret(secretKey)}` },
             { name: 'Content-Type', value: 'application/json' },
             { name: 'Connection-Id', value: connectionId },
             { name: 'Provider-Config-Key', value: providerConfigKey }

packages/webapp/src/utils/utils.tsx

@@ -3,42 +3,17 @@ import type { ClassValue } from 'clsx';
 import { format } from 'date-fns';
 import { twMerge } from 'tailwind-merge';
 import type { SyncResult } from '../types';
+import { globalEnv } from './env';
 
-export const localhostUrl: string = 'http://localhost:3003';
-export const stagingUrl: string = 'https://api-staging.nango.dev';
-export const prodUrl: string = 'https://api.nango.dev';
-
-export const syncDocs = 'https://docs.nango.dev/guides/getting-started/read-from-an-api';
 export const githubRepo = 'https://github.com/NangoHQ/integration-templates';
 export const githubIntegrationTemplates = `${githubRepo}/tree/main/integrations`;
 
-export function isHosted() {
-    return process.env.REACT_APP_ENV === 'hosted';
-}
-
-export function isStaging() {
-    return process.env.REACT_APP_ENV === 'staging';
-}
-
-export function isProd() {
-    return process.env.REACT_APP_ENV === 'production';
-}
-
-export function baseUrl() {
-    switch (process.env.REACT_APP_ENV) {
-        case 'hosted':
-            return localhostUrl;
-        case 'staging':
-            return stagingUrl;
-        case 'production':
-            return prodUrl;
-        default:
-            return localhostUrl;
-    }
+export function isCloudProd() {
+    return window.location.origin === 'https://app.nango.dev';
 }
 
 export function defaultCallback() {
-    return baseUrl() + '/oauth/callback';
+    return globalEnv.apiUrl + '/oauth/callback';
 }
 
 export function elapsedTime(start: Date | number, end: Date | number): string {

scripts/build_docker.sh

@@ -44,7 +44,6 @@ echo -e "Building nangohq/nango:$ENV\n"
 
 docker buildx build \
   --platform linux/amd64 \
-  --build-arg image_env="$ENV" \
   --build-arg git_hash="$GIT_HASH" \
   --cache-from type=gha \
   --cache-to type=gha,mode=max \