feat(vue-demo): add private shopwareEndpoint (#325)

.changeset/dull-buses-train.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Add private `shopwareEndpoint`

.changeset/gorgeous-keys-crash.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/nuxt3-module": minor
+---
+
+Add private `shopwareEndpoint` config for SSR instance creation

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

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: {

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",