feat: auto url on multistore

.changeset/itchy-cycles-act.md

@@ -0,0 +1,5 @@
+---
+"@vue-storefront/nuxt": major
+---
+
+[BREAKING]: Added functionality that automatically configures the proper URLs for SSR & SPA modes when mutlistore mode is enabled. Left your environment variables like in normal mode, just set `NUXT_PUBLIC_ALOKAI_MULTISTORE_ENABLED` to `true`.

.changeset/selfish-knives-admire.md

@@ -0,0 +1,22 @@
+---
+"@vue-storefront/next": minor
+---
+
+[CHANGE]: Added the `resolveSdkOptions` helper that automatically setup proper SSR & SPA URLs for middleware when multistore option is enabled. To use it, change your SDK configuration:
+
+```diff
+-import type { CreateSdkOptions } from '@vue-storefront/next';
++import { resolveSdkOptions } from '@vue-storefront/next';
+
+-const options: CreateSdkOptions = {
++const options = resolveSdkOptions({
+  middleware: {
+    apiUrl,
+    cdnCacheBustingId,
+    ssrApiUrl,
+  },
+  multistore: {
+    enabled: isMultiStoreEnabled,
+  },
+});
+```

docs/content/4.sdk/2.getting-started/1.index.md

@@ -40,19 +40,19 @@ If you want to keep your Storefront more configurable, we highly recommend using
 ::
 
 ```ts [sdk/options.ts]
-import type { CreateSdkOptions } from '@vue-storefront/next';
+import { resolveSdkOptions } from '@vue-storefront/next';
 import { env } from 'next-runtime-env';
 
 export function getSdkOptions() {
   const apiUrl = env('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL') ?? '';
   const ssrApiUrl = env('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_SSR_API_URL');
   const cdnCacheBustingId = env('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_CDN_CACHE_BUSTING_ID') ?? 'no-cache-busting-id-set';
-  const isMultiStoreEnabled = env('NEXT_PUBLIC_MULTISTORE_ENABLED') === 'true';
+  const isMultiStoreEnabled = env('NEXT_PUBLIC_ALOKAI_MULTISTORE_ENABLED') === 'true';
   if (!apiUrl) {
     throw new Error('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL is required to run the app');
   }
 
-  const options: CreateSdkOptions = {
+  const options = resolveSdkOptions({
     middleware: {
       apiUrl,
       cdnCacheBustingId,
@@ -61,7 +61,7 @@ export function getSdkOptions() {
     multistore: {
       enabled: isMultiStoreEnabled,
     },
-  };
+  });
 
   return options;
 }

packages/next/src/sdk/index.tsx

@@ -109,3 +109,35 @@ export function defineSdkConfig<TConfig extends Record<string, any>>(
 ) {
   return config;
 }
+
+type ResolveSdkOptionsConfig = {
+  customSuffix: string;
+};
+
+/**
+ * Helper function to resolve the SDK options based on the configuration.
+ * @param input - The options for creating the SDK.
+ * @param options - The configuration object, that allows to customize the API Url creation on enabled multistore.
+ * @returns The resolved SDK options.
+ */
+export function resolveSdkOptions(
+  input: CreateSdkOptions,
+  options: Partial<ResolveSdkOptionsConfig> = {}
+): CreateSdkOptions {
+  if (input?.multistore?.enabled) {
+    return {
+      middleware: {
+        // This is a dummy URL, the localhost domain will be replaced by the actual domain in the browser
+        // in composeMiddlewareUrl function. The server-side rendering will use ssrApiUrl.
+        apiUrl: `https://localhost/${options?.customSuffix ?? "api"}`,
+        cdnCacheBustingId: input.middleware?.cdnCacheBustingId,
+        ssrApiUrl: input.middleware?.ssrApiUrl ?? input.middleware.apiUrl,
+      },
+      multistore: {
+        enabled: true,
+      },
+    };
+  }
+
+  return input;
+}

packages/nuxt/src/runtime/defineSdkConfig.template

@@ -66,8 +66,10 @@ export function defineSdkConfig<TConfig>(config: Config<TConfig>) {
     const runtimeConfig = useRuntimeConfig();
 
     const requestHeaders = useRequestHeaders(["x-forwarded-host", "host"]);
+    const resolvedOptions = resolveOptions(runtimeConfig.public.alokai);
+
     const middlewareUrl = composeMiddlewareUrl({
-      options: runtimeConfig.public.alokai,
+      options: resolvedOptions,
       headers: requestHeaders,
     });
 
@@ -89,3 +91,29 @@ export function defineSdkConfig<TConfig>(config: Config<TConfig>) {
     });
   }
 }
+
+function resolveSdkOptions(
+  input: SdkModuleOptions,
+  options: Partial<ResolveSdkOptionsConfig> = {}
+): SdkModuleOptions {
+  if (input?.multistore?.enabled) {
+    return {
+      middleware: {
+        // This is a dummy URL, the localhost domain will be replaced by the actual domain in the browser
+        // in composeMiddlewareUrl function. The server-side rendering will use ssrApiUrl.
+        apiUrl: `https://localhost/${options?.customSuffix ?? "api"}`,
+        cdnCacheBustingId: input.middleware?.cdnCacheBustingId,
+        ssrApiUrl: input.middleware?.ssrApiUrl ?? input.middleware.apiUrl,
+      },
+      multistore: {
+        enabled: true,
+      },`
+    };
+  }
+
+  return input;
+}
+
+type ResolveSdkOptionsConfig = {
+  customSuffix: string;
+}

packages/nuxt/src/runtime/utils/composeMiddlewareUrl.ts

@@ -13,6 +13,8 @@ function calculateMiddlewareUrl({
 
   if (typeof window !== "undefined") {
     if (options.multistore?.enabled) {
+      // In options the apiUrl is a dummy URL with the localhost domain and real subpath.
+      // Here we replacing by the actual domain from the browser.
       const url = new URL(apiUrl);
       url.host = window.location.host;
       return url.href;