diff --git a/.changeset/dull-buses-train.md b/.changeset/dull-buses-train.md new file mode 100644 index 000000000..5bb8f745f --- /dev/null +++ b/.changeset/dull-buses-train.md @@ -0,0 +1,5 @@ +--- +"vue-demo-store": minor +--- + +Add private `shopwareEndpoint` diff --git a/.changeset/gorgeous-keys-crash.md b/.changeset/gorgeous-keys-crash.md new file mode 100644 index 000000000..d2c04d547 --- /dev/null +++ b/.changeset/gorgeous-keys-crash.md @@ -0,0 +1,5 @@ +--- +"@shopware-pwa/nuxt3-module": minor +--- + +Add private `shopwareEndpoint` config for SSR instance creation diff --git a/apps/docs/src/getting-started/templates/custom-project.md b/apps/docs/src/getting-started/templates/custom-project.md index 5cc64088c..80b8ae0e0 100644 --- a/apps/docs/src/getting-started/templates/custom-project.md +++ b/apps/docs/src/getting-started/templates/custom-project.md @@ -257,6 +257,34 @@ export default { }; ``` +## Shopware Endpoint on the SSR mode + +It may happen that for SSR and CSR, you need two different shopware endpoints. One of the most common situations is when you are using an internal network for communication between apps. + +``` +Server URL to the backend: http://shopware (not exposed) +Client URL to the backend https://demo-frontends.shopware.store (exposed) +``` + +If you are using the Nuxt plugin, you can set private and public envs: + +``` +NUXT_SHOPWARE_SHOPWARE_ENDPOINT=http://shopware +NUXT_PUBLIC_SHOPWARE_SHOPWARE_ENDPOINT=https://demo-frontends.shopware.store +``` + +Otherwise, make sure that you are setting different values on the create instance phase + +```ts +const instance = createInstance({ + endpoint: ssrValue || clientValue, + accessToken: options.shopwareAccessToken, + timeout: options.shopwareApiClient?.timeout || 5000, + contextToken: contextToken.value, + languageId: languageId.value, +}); +``` + ## Next steps After your setup, you can follow our building guides to get started with Shopware Frontends diff --git a/packages/nuxt3-module/plugin.ts b/packages/nuxt3-module/plugin.ts index d93d4a38f..871239aaa 100644 --- a/packages/nuxt3-module/plugin.ts +++ b/packages/nuxt3-module/plugin.ts @@ -41,8 +41,13 @@ const ShopwarePlugin = { ); } + /** + * Server config has bigger prio than client + */ const instance = createInstance({ - endpoint: runtimeConfig.public.shopware.shopwareEndpoint, + endpoint: + runtimeConfig?.shopware?.shopwareEndpoint || + runtimeConfig.public.shopware.shopwareEndpoint, accessToken: runtimeConfig.public.shopware.shopwareAccessToken, timeout: runtimeConfig.public.shopware.shopwareAccessToken || 10000, auth: { diff --git a/templates/vue-demo-store/nuxt.config.ts b/templates/vue-demo-store/nuxt.config.ts index 857cf12b1..506e27145 100644 --- a/templates/vue-demo-store/nuxt.config.ts +++ b/templates/vue-demo-store/nuxt.config.ts @@ -3,6 +3,13 @@ import { VueDisableInputsBeforeMount } from "vite-vue-plugin-disable-inputs"; // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config export default defineNuxtConfig({ runtimeConfig: { + shopware: { + /** + * SSR Shopware Endpoint + * More here: https://frontends.shopware.com/getting-started/templates/custom-project.html#shopware-endpoint-on-the-ssr-mode + */ + shopwareEndpoint: "", + }, public: { shopware: { shopwareEndpoint: "https://demo-frontends.shopware.store",