Add docker envs

.changeset/spicy-eels-hear.md

@@ -0,0 +1,15 @@
+---
+"saleor-app-emails-and-messages": minor
+"saleor-app-data-importer": minor
+"saleor-app-products-feed": minor
+"saleor-app-monitoring": minor
+"saleor-app-invoices": minor
+"saleor-app-klaviyo": minor
+"saleor-app-search": minor
+"saleor-app-slack": minor
+"saleor-app-taxes": minor
+"saleor-app-cms": minor
+"saleor-app-crm": minor
+---
+
+Added additional ENV variables (see each app's .env.example), that can overwrite app base URL. This change allows easy apps development using Docker

apps/cms/.env.example

@@ -8,3 +8,10 @@ REST_APL_ENDPOINT=
 REST_APL_TOKEN=
 
 APP_LOG_LEVEL=info
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/cms/src/pages/api/manifest.ts

@@ -8,19 +8,22 @@ import { productVariantDeletedWebhook } from "./webhooks/product-variant-deleted
 import { productUpdatedWebhook } from "./webhooks/product-updated";
 
 export default createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       name: "CMS",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       permissions: ["MANAGE_PRODUCTS"],
       id: "saleor.app.cms",
       version: packageJson.version,
       webhooks: [
-        productVariantCreatedWebhook.getWebhookManifest(context.appBaseUrl),
+        productVariantCreatedWebhook.getWebhookManifest(apiBaseURL),
-        productVariantUpdatedWebhook.getWebhookManifest(context.appBaseUrl),
+        productVariantUpdatedWebhook.getWebhookManifest(apiBaseURL),
-        productVariantDeletedWebhook.getWebhookManifest(context.appBaseUrl),
+        productVariantDeletedWebhook.getWebhookManifest(apiBaseURL),
-        productUpdatedWebhook.getWebhookManifest(context.appBaseUrl),
+        productUpdatedWebhook.getWebhookManifest(apiBaseURL),
       ],
       extensions: [],
       author: "Saleor Commerce",
@@ -29,7 +32,7 @@ export default createManifestHandler({
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/cms/turbo.json

@@ -18,7 +18,9 @@
         "SENTRY_PROJECT",
         "SENTRY_ORG",
         "SENTRY_AUTH_TOKEN",
-        "SENTRY_ENVIRONMENT"
+        "SENTRY_ENVIRONMENT",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/crm/.env.example

@@ -9,4 +9,11 @@ REST_APL_TOKEN=
 MAILCHIMP_CLIENT_ID=
 MAILCHIMP_CLIENT_SECRET=
 
-APP_LOG_LEVEL=info
+APP_LOG_LEVEL=info
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/crm/src/pages/api/manifest.ts

@@ -6,11 +6,14 @@ import { customerCreatedWebhook } from "./webhooks/customer-created";
 import { customerMetadataUpdatedWebhook } from "./webhooks/customer-updated";
 
 export default createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       name: "CRM",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       permissions: [
         "MANAGE_USERS",
         /**
@@ -21,8 +24,8 @@ export default createManifestHandler({
       id: "saleor.app.crm",
       version: packageJson.version,
       webhooks: [
-        customerCreatedWebhook.getWebhookManifest(context.appBaseUrl),
+        customerCreatedWebhook.getWebhookManifest(apiBaseURL),
-        customerMetadataUpdatedWebhook.getWebhookManifest(context.appBaseUrl),
+        customerMetadataUpdatedWebhook.getWebhookManifest(apiBaseURL),
       ],
       extensions: [
         /**
@@ -36,7 +39,7 @@ export default createManifestHandler({
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/crm/turbo.json

@@ -19,7 +19,9 @@
         "SENTRY_PROJECT",
         "SENTRY_AUTH_TOKEN",
         "SENTRY_ORG",
-        "SENTRY_ENVIRONMENT"
+        "SENTRY_ENVIRONMENT",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/data-importer/.env.example

@@ -2,4 +2,11 @@
 NEXT_PUBLIC_NUVO_LICENSE_KEY=
 NEXT_PUBLIC_NUVO_PROD_MODE=false
 
-APP_LOG_LEVEL=info
+APP_LOG_LEVEL=info
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/data-importer/src/pages/api/manifest.ts

@@ -4,11 +4,14 @@ import { AppManifest } from "@saleor/app-sdk/types";
 import packageJson from "../../../package.json";
 
 export default createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       name: "Data Importer",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       permissions: ["MANAGE_USERS"],
       id: "saleor.app.data-importer",
       version: packageJson.version,
@@ -31,7 +34,7 @@ export default createManifestHandler({
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/data-importer/turbo.json

@@ -22,7 +22,9 @@
         "SENTRY_ORG",
         "SENTRY_DSN",
         "SENTRY_ENVIRONMENT",
-        "NEXT_PUBLIC_SENTRY_DSN"
+        "NEXT_PUBLIC_SENTRY_DSN",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/emails-and-messages/.env.example

@@ -7,4 +7,11 @@ APL=
 REST_APL_ENDPOINT=
 REST_APL_TOKEN=
 
-APP_LOG_LEVEL=info
+APP_LOG_LEVEL=info
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/emails-and-messages/src/pages/api/manifest.ts

@@ -4,11 +4,14 @@ import { AppManifest } from "@saleor/app-sdk/types";
 import packageJson from "../../../package.json";
 
 export default createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       name: "Emails & Messages",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       permissions: ["MANAGE_ORDERS", "MANAGE_USERS"],
       id: "saleor.app.emails-and-messages",
       version: packageJson.version,
@@ -28,7 +31,7 @@ export default createManifestHandler({
       requiredSaleorVersion: ">=3.10 <4",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/emails-and-messages/turbo.json

@@ -19,7 +19,9 @@
         "SENTRY_DSN",
         "SENTRY_AUTH_TOKEN",
         "NEXT_PUBLIC_SENTRY_DSN",
-        "SENTRY_ENVIRONMENT"
+        "SENTRY_ENVIRONMENT",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/invoices/.env.example

@@ -8,4 +8,11 @@ APP_LOG_LEVEL=info
 # See api/register.tsx
 # Leave empty to allow all domains
 # Example: "https:\/\/.*.saleor.cloud\/graphql\/" to enable Saleor Cloud APIs
-ALLOWED_DOMAIN_PATTERN=
+ALLOWED_DOMAIN_PATTERN=
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/invoices/src/pages/api/manifest.ts

@@ -6,9 +6,9 @@ import { invoiceRequestedWebhook } from "./webhooks/invoice-requested";
 import { REQUIRED_SALEOR_VERSION } from "../../saleor-app";
 
 export default createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
-    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? context.appBaseUrl;
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
-    const apiBaseURL = process.env.APP_API_BASE_URL ?? context.appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
 
     const manifest: AppManifest = {
       name: "Invoices",

apps/klaviyo/.env.example

@@ -8,4 +8,11 @@ ALLOWED_DOMAIN_PATTERN=
 # Encryption key used by the EncryptedSettingsManager. Required by the production builds
 SECRET_KEY=
 
-APP_LOG_LEVEL=info
+APP_LOG_LEVEL=info
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/klaviyo/src/pages/api/manifest.ts

@@ -11,18 +11,21 @@ const handler = createManifestHandler({
   async manifestFactory(context): Promise<AppManifest> {
     const { appBaseUrl } = context;
 
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     return {
       id: "saleor.app.klaviyo",
       version: pkg.version,
       name: "Klaviyo",
       permissions: ["MANAGE_USERS", "MANAGE_ORDERS"],
-      appUrl: appBaseUrl,
+      appUrl: iframeBaseUrl,
-      tokenTargetUrl: `${appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       webhooks: [
-        customerCreatedWebhook.getWebhookManifest(appBaseUrl),
+        customerCreatedWebhook.getWebhookManifest(apiBaseURL),
-        fulfillmentCreatedWebhook.getWebhookManifest(appBaseUrl),
+        fulfillmentCreatedWebhook.getWebhookManifest(apiBaseURL),
-        orderCreatedWebhook.getWebhookManifest(appBaseUrl),
+        orderCreatedWebhook.getWebhookManifest(apiBaseURL),
-        orderFullyPaidWebhook.getWebhookManifest(appBaseUrl),
+        orderFullyPaidWebhook.getWebhookManifest(apiBaseURL),
       ],
       supportUrl: "https://github.com/saleor/apps/discussions",
       homepageUrl: "https://github.com/saleor/apps",
@@ -30,7 +33,7 @@ const handler = createManifestHandler({
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/klaviyo/turbo.json

@@ -18,7 +18,9 @@
         "SENTRY_PROJECT",
         "SENTRY_AUTH_TOKEN",
         "NEXT_PUBLIC_VERCEL_ENV",
-        "SENTRY_ENVIRONMENT"
+        "SENTRY_ENVIRONMENT",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/monitoring/.env.example

@@ -1 +1,8 @@
-MONITORING_APP_API_URL=
+MONITORING_APP_API_URL=
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/monitoring/turbo.json

@@ -18,7 +18,9 @@
         "SENTRY_PROJECT",
         "SENTRY_AUTH_TOKEN",
         "NEXT_PUBLIC_VERCEL_ENV",
-        "MONITORING_APP_API_URL"
+        "MONITORING_APP_API_URL",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/products-feed/.env.example

@@ -1 +1,18 @@
-APP_DEBUG=info
+APL=file
+# Optional
+# Regex pattern consumed conditionally to restrcit app installation to specific urls.
+# See api/register.tsx
+# Leave empty to allow all domains
+# Example: "https:\/\/.*.saleor.cloud\/graphql\/" to enable Saleor Cloud APIs
+ALLOWED_DOMAIN_PATTERN=
+# Encryption key used by the EncryptedSettingsManager. Required by the production builds
+SECRET_KEY=
+
+APP_LOG_LEVEL=info
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/products-feed/src/pages/api/manifest.ts

@@ -9,9 +9,9 @@ import { webhookProductVariantDeleted } from "./webhooks/product_variant_deleted
 import { webhookProductVariantUpdated } from "./webhooks/product_variant_updated";
 
 export default createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
-    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? context.appBaseUrl;
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
-    const apiBaseURL = process.env.APP_API_BASE_URL ?? context.appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
 
     const manifest: AppManifest = {
       name: "Product Feed",

apps/search/.env.example

@@ -1,4 +1,11 @@
 # Encryption key used by the EncryptedSettingsManager. Required by the production builds
 SECRET_KEY=
 
-APP_LOG_LEVEL=info
+APP_LOG_LEVEL=info
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/search/src/pages/api/manifest.ts

@@ -10,11 +10,14 @@ import { webhookProductVariantDeleted } from "./webhooks/saleor/product_variant_
 import { webhookProductVariantUpdated } from "./webhooks/saleor/product_variant_updated";
 
 export default createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       name: "Search",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       permissions: [
         /**
          * Set permissions for app if needed
@@ -31,12 +34,12 @@ export default createManifestHandler({
          * Read more
          * https://docs.saleor.io/docs/3.x/developer/api-reference/objects/webhook
          */
-        webhookProductCreated.getWebhookManifest(context.appBaseUrl),
+        webhookProductCreated.getWebhookManifest(apiBaseURL),
-        webhookProductDeleted.getWebhookManifest(context.appBaseUrl),
+        webhookProductDeleted.getWebhookManifest(apiBaseURL),
-        webhookProductUpdated.getWebhookManifest(context.appBaseUrl),
+        webhookProductUpdated.getWebhookManifest(apiBaseURL),
-        webhookProductVariantCreated.getWebhookManifest(context.appBaseUrl),
+        webhookProductVariantCreated.getWebhookManifest(apiBaseURL),
-        webhookProductVariantDeleted.getWebhookManifest(context.appBaseUrl),
+        webhookProductVariantDeleted.getWebhookManifest(apiBaseURL),
-        webhookProductVariantUpdated.getWebhookManifest(context.appBaseUrl),
+        webhookProductVariantUpdated.getWebhookManifest(apiBaseURL),
       ],
       extensions: [
         /**
@@ -49,7 +52,7 @@ export default createManifestHandler({
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/search/turbo.json

@@ -17,7 +17,9 @@
         "SENTRY_ORG",
         "NEXT_PUBLIC_VERCEL_ENV",
         "NEXT_PUBLIC_SENTRY_DSN",
-        "SENTRY_ENVIRONMENT"
+        "SENTRY_ENVIRONMENT",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/slack/.env.example

@@ -1,4 +1,12 @@
 # Encryption key used by the EncryptedSettingsManager. Required by the production builds
 SECRET_KEY=
 
-APP_LOG_LEVEL=info
+APP_LOG_LEVEL=info
+
+
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/slack/src/pages/api/manifest.ts

@@ -5,15 +5,18 @@ import packageJson from "../../../package.json";
 import { orderCreatedWebhook } from "./webhooks/order-created";
 
 const handler = createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       name: "Slack",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       permissions: ["MANAGE_ORDERS"],
       id: "saleor.app.slack",
       version: packageJson.version,
-      webhooks: [orderCreatedWebhook.getWebhookManifest(context.appBaseUrl)],
+      webhooks: [orderCreatedWebhook.getWebhookManifest(apiBaseURL)],
       extensions: [],
       author: "Saleor Commerce",
       supportUrl: "https://github.com/saleor/apps/discussions",
@@ -21,7 +24,7 @@ const handler = createManifestHandler({
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/slack/turbo.json

@@ -18,7 +18,9 @@
         "SENTRY_PROJECT",
         "SENTRY_AUTH_TOKEN",
         "SENTRY_ENVIRONMENT",
-        "NEXT_PUBLIC_VERCEL_ENV"
+        "NEXT_PUBLIC_VERCEL_ENV",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/taxes/.env.example

@@ -1,11 +1,11 @@
-APL=file
+# Encryption key used by the EncryptedSettingsManager. Required by the production builds
-
-#"fatal" | "error" | "warn" | "info" | "debug" | "trace"
-APP_LOG_LEVEL=info
-NODE_ENV=
 SECRET_KEY=
-PORT=
+
-VERCEL_URL=
+APP_LOG_LEVEL=info
-REST_APL_ENDPOINT=
+
-REST_APL_TOKEN=
+# Local development variables. When developped locally with Saleor inside docker, these can be set to:
-ALLOWED_DOMAIN_PATTERN=
+# APP_IFRAME_BASE_URL = http://localhost:3000, so Dashboard on host can access iframe
+# APP_API_BASE_URL=http://host.docker.internal:3000 - so Saleor can reach App running on host, from the container.
+# If developped with tunnels, set this empty, it will fallback to default Next's localhost:3000
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

apps/taxes/src/pages/api/manifest.ts

@@ -9,19 +9,22 @@ import { orderFulfilledAsyncWebhook } from "./webhooks/order-fulfilled";
 import { REQUIRED_SALEOR_VERSION } from "../../../saleor-app";
 
 export default createManifestHandler({
-  async manifestFactory(context) {
+  async manifestFactory({ appBaseUrl }) {
+    const iframeBaseUrl = process.env.APP_IFRAME_BASE_URL ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       name: "Taxes",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       permissions: ["HANDLE_TAXES", "MANAGE_ORDERS"],
       id: "saleor.app.taxes",
       version: packageJson.version,
       webhooks: [
-        orderCalculateTaxesSyncWebhook.getWebhookManifest(context.appBaseUrl),
+        orderCalculateTaxesSyncWebhook.getWebhookManifest(apiBaseURL),
-        checkoutCalculateTaxesSyncWebhook.getWebhookManifest(context.appBaseUrl),
+        checkoutCalculateTaxesSyncWebhook.getWebhookManifest(apiBaseURL),
-        orderCreatedAsyncWebhook.getWebhookManifest(context.appBaseUrl),
+        orderCreatedAsyncWebhook.getWebhookManifest(apiBaseURL),
-        orderFulfilledAsyncWebhook.getWebhookManifest(context.appBaseUrl),
+        orderFulfilledAsyncWebhook.getWebhookManifest(apiBaseURL),
       ],
       extensions: [],
       homepageUrl: "https://github.com/saleor/apps",
@@ -31,7 +34,7 @@ export default createManifestHandler({
       requiredSaleorVersion: REQUIRED_SALEOR_VERSION,
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/taxes/turbo.json

@@ -18,7 +18,9 @@
         "SENTRY_DSN",
         "SENTRY_AUTH_TOKEN",
         "SENTRY_ENVIRONMENT",
-        "NEXT_PUBLIC_SENTRY_DSN"
+        "NEXT_PUBLIC_SENTRY_DSN",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }