Update menifests to reflect dynamic urls from env (#695)

.changeset/yellow-badgers-promise.md

@@ -0,0 +1,14 @@
+---
+"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-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,11 @@ 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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

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

@@ -8,15 +8,18 @@ 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 = {
       about:
         "CMS App is a multi-integration app that connects Saleor with popular Content Management Systems.",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
@@ -26,13 +29,13 @@ export default createManifestHandler({
       name: "CMS",
       permissions: ["MANAGE_PRODUCTS"],
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       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),
       ],
     };
 

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,12 @@ 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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

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

@@ -6,14 +6,17 @@ 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 = {
       about: "CRM App allows synchronization of customers from Saleor to other platforms",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
@@ -34,11 +37,11 @@ export default createManifestHandler({
          */
       ],
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       version: packageJson.version,
       webhooks: [
-        customerCreatedWebhook.getWebhookManifest(context.appBaseUrl),
+        customerCreatedWebhook.getWebhookManifest(apiBaseURL),
-        customerMetadataUpdatedWebhook.getWebhookManifest(context.appBaseUrl),
+        customerMetadataUpdatedWebhook.getWebhookManifest(apiBaseURL),
       ],
     };
 

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,12 @@
 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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

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

@@ -4,15 +4,18 @@ 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 = {
       about:
         "Data Importer allows batch import of shop data to Saleor from sources like CSV or Excel",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
@@ -27,7 +30,7 @@ export default createManifestHandler({
       name: "Data Importer",
       permissions: ["MANAGE_USERS"],
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       version: packageJson.version,
       webhooks: [
         /**

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,12 @@ 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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

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

@@ -4,15 +4,18 @@ 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 = {
       about:
         "Emails & Messages App is a multi-vendor Saleor app that integrates with notification services.",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
@@ -31,7 +34,7 @@ export default createManifestHandler({
        */
       requiredSaleorVersion: ">=3.10 <4",
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       version: packageJson.version,
     };
 

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,12 @@ 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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

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

@@ -6,11 +6,14 @@ 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 ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       about:
         "An app that generates PDF invoices for Orders and stores them in Saleor file storage.",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       author: "Saleor Commerce",
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
       extensions: [],
@@ -23,12 +26,12 @@ export default createManifestHandler({
        */
       requiredSaleorVersion: REQUIRED_SALEOR_VERSION,
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       version: packageJson.version,
-      webhooks: [invoiceRequestedWebhook.getWebhookManifest(context.appBaseUrl)],
+      webhooks: [invoiceRequestedWebhook.getWebhookManifest(apiBaseURL)],
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
     };

apps/invoices/turbo.json

@@ -20,7 +20,9 @@
         "SENTRY_ORG",
         "SENTRY_AUTH_TOKEN",
         "NEXT_PUBLIC_SENTRY_DSN",
-        "SENTRY_ENVIRONMENT"
+        "SENTRY_ENVIRONMENT",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/klaviyo/.env.example

@@ -8,4 +8,12 @@ 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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+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,9 @@
-APP_DEBUG=info
+APP_DEBUG=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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

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

@@ -9,14 +9,17 @@ 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 ?? appBaseUrl;
+    const apiBaseURL = process.env.APP_API_BASE_URL ?? appBaseUrl;
+
     const manifest: AppManifest = {
       about: "Generate feeds consumed by Merchant Platforms",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
@@ -26,14 +29,14 @@ export default createManifestHandler({
       name: "Product Feed",
       permissions: ["MANAGE_PRODUCTS"],
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       version: packageJson.version,
       webhooks: [
-        webhookProductCreated.getWebhookManifest(context.appBaseUrl),
+        webhookProductCreated.getWebhookManifest(apiBaseURL),
-        webhookProductDeleted.getWebhookManifest(context.appBaseUrl),
+        webhookProductDeleted.getWebhookManifest(apiBaseURL),
-        webhookProductVariantCreated.getWebhookManifest(context.appBaseUrl),
+        webhookProductVariantCreated.getWebhookManifest(apiBaseURL),
-        webhookProductVariantDeleted.getWebhookManifest(context.appBaseUrl),
+        webhookProductVariantDeleted.getWebhookManifest(apiBaseURL),
-        webhookProductVariantUpdated.getWebhookManifest(context.appBaseUrl),
+        webhookProductVariantUpdated.getWebhookManifest(apiBaseURL),
       ],
     };
 

apps/products-feed/turbo.json

@@ -20,7 +20,9 @@
         "FEED_CACHE_MAX_AGE",
         "VERCEL_URL",
         "PORT",
-        "SENTRY_ENVIRONMENT"
+        "SENTRY_ENVIRONMENT",
+        "APP_IFRAME_BASE_URL",
+        "APP_API_BASE_URL"
       ]
     }
   }

apps/search/.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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=

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

@@ -10,14 +10,17 @@ 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 = {
       about:
         "Search App is a multi-integration app that connects your Saleor store with search engines.",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
@@ -39,7 +42,7 @@ export default createManifestHandler({
         "MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES",
       ],
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       version: packageJson.version,
       webhooks: [
         /**
@@ -47,12 +50,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),
       ],
     };
 

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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+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 = {
       about:
         "Saleor Slack integration allows you to get notifications on Slack channel from Saleor events.",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
@@ -23,9 +26,9 @@ const handler = createManifestHandler({
       name: "Slack",
       permissions: ["MANAGE_ORDERS"],
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       version: packageJson.version,
-      webhooks: [orderCreatedWebhook.getWebhookManifest(context.appBaseUrl)],
+      webhooks: [orderCreatedWebhook.getWebhookManifest(apiBaseURL)],
     };
 
     return manifest;

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

@@ -8,4 +8,12 @@ PORT=
 VERCEL_URL=
 REST_APL_ENDPOINT=
 REST_APL_TOKEN=
-ALLOWED_DOMAIN_PATTERN=
+ALLOWED_DOMAIN
+
+# 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
+# https://docs.saleor.io/docs/3.x/developer/extending/apps/local-app-development
+APP_IFRAME_BASE_URL=
+APP_API_BASE_URL=_PATTERN=

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

@@ -9,14 +9,17 @@ 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 = {
       about: "Taxes App allows dynamic taxes calculations for orders",
-      appUrl: context.appBaseUrl,
+      appUrl: iframeBaseUrl,
       author: "Saleor Commerce",
       brand: {
         logo: {
-          default: `${context.appBaseUrl}/logo.png`,
+          default: `${apiBaseURL}/logo.png`,
         },
       },
       dataPrivacyUrl: "https://saleor.io/legal/privacy/",
@@ -27,13 +30,13 @@ export default createManifestHandler({
       permissions: ["HANDLE_TAXES", "MANAGE_ORDERS"],
       requiredSaleorVersion: REQUIRED_SALEOR_VERSION,
       supportUrl: "https://github.com/saleor/apps/discussions",
-      tokenTargetUrl: `${context.appBaseUrl}/api/register`,
+      tokenTargetUrl: `${apiBaseURL}/api/register`,
       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),
       ],
     };
 

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"
       ]
     }
   }