fix(os-203): fixed adding custom router.base property breaks api calls (vuestorefront#6526) (vuestorefront#6592)

Co-authored-by: Piotr Grzywa <pgrzywa@vuestorefront.io>

Co-authored-by: Piotr Grzywa <pgrzywa@vuestorefront.io>

Author: PiotrGrzywa

packages/boilerplate/theme/nuxt.config.js

@@ -19,7 +19,7 @@ export default {
       {
         rel: 'icon',
         type: 'image/x-icon',
-        href: '/favicon.ico'
+        href: './favicon.ico'
       },
       {
         rel: 'preconnect',

packages/core/core/src/utils/helpers/index.ts

@@ -0,0 +1,21 @@
+import { useRouter } from '@nuxtjs/composition-api';
+
+/**
+ * Adds prefix with base path configured in router.base to provided url
+ * @param {string} path - url to which base path will be added
+ * @returns Relative path prefixed with router.base or not modified absolute path (it needs start from http or https)
+ */
+function addBasePath (path: string): string {
+  const pattern = /^((http|https):\/\/)/;
+
+  if (pattern.test(path)) {
+    return path;
+  }
+
+  const basePath = (useRouter().options.base).slice(0, -1);
+  return `${basePath}${path}`;
+}
+
+export {
+  addBasePath
+};

packages/core/core/src/utils/index.ts

@@ -4,6 +4,7 @@ import { onSSR, vsfRef, configureSSR } from './ssr';
 import { sharedRef } from './shared';
 import wrap from './wrap';
 import { Logger, registerLogger } from './logger';
+import { addBasePath } from './helpers';
 import mask from './logger/mask';
 import { useVSFContext, configureContext, generateContext } from './context';
 import { integrationPlugin } from './nuxt';
@@ -24,5 +25,6 @@ export {
   configureFactoryParams,
   generateContext,
   integrationPlugin,
-  i18nRedirectsUtil
+  i18nRedirectsUtil,
+  addBasePath
 };

packages/core/core/src/utils/nuxt/_proxyUtils.ts

@@ -9,14 +9,14 @@ interface CreateProxiedApiParams {
   tag: string;
 }
 
-export const getBaseUrl = (req: IncomingMessage) => {
-  if (!req) return '/api/';
+export const getBaseUrl = (req: IncomingMessage, basePath: string | undefined = '/'): string => {
+  if (!req) return `${basePath}api/`;
   const { headers } = req;
   const isHttps = require('is-https')(req);
   const scheme = isHttps ? 'https' : 'http';
   const host = headers['x-forwarded-host'] || headers.host;
 
-  return `${scheme}://${host}/api/`;
+  return `${scheme}://${host}${basePath}api/`;
 };
 
 export const createProxiedApi = ({ givenApi, client, tag }: CreateProxiedApiParams) => new Proxy(givenApi, {
@@ -39,7 +39,7 @@ export const getIntegrationConfig = (context: NuxtContext, configuration: any) =
   const cookie = getCookies(context);
   const initialConfig = merge({
     axios: {
-      baseURL: getBaseUrl(context?.req),
+      baseURL: getBaseUrl(context?.req, context?.base),
       headers: {
         ...(cookie ? { cookie } : {})
       }

packages/core/docs/changelog/6526.js

@@ -0,0 +1,8 @@
+module.exports = {
+  description: 'Fixed adding custom router.base property breaks api calls',
+  link: 'https://github.com/vuestorefront/vue-storefront/issues/6505',
+  isBreaking: false,
+  breakingChanges: [],
+  author: 'Piotr Grzywa',
+  linkToGitHubAccount: 'https://github.com/PiotrGrzywa'
+};

packages/core/docs/getting-started/theme.md

@@ -33,6 +33,45 @@ These two components come from the `vue-lazy-hydration` library and are wrappers
 
 If you encounter one of these components, you should refer to the direct **child** component.
 
+### Router base property
+
+There is an option to set base URL for your store.
+
+This can be useful if you need to serve your store as a different context root, from within a bigger Web site.
+
+Add following configuration to `nuxt.config.js`
+```javascript
+// nuxt.config.js
+
+export default {
+  router: {
+    base: "/myShop/"
+  }
+};
+```
+
+:::warning Be careful
+When using base router property you need to wrap all assets relative links in addBasePath(), this will automatically add base path to them and prevent redirects. (example below)
+:::
+
+
+
+```javascript
+//use addBasePath on relative url
+<SfImage :src="addBasePath(`/homepage/imageA.webp`)" />
+<SfBanner :image="addBasePath('/homepage/bannerA.png')" />
+
+//In theme file import addBasePath from vue-storefront core
+import { addBasePath } from '@vue-storefront/core';
+
+setup() {
+  return {
+    // if you want to use it in template you need to exprt it
+    addBasePath
+  }
+}
+```
+
 ## Updating styles
 
 There are few ways of updating the default styles. Below we describe the most optimal ways for the most common cases.

packages/core/nuxt-theme-module/theme/components/AppFooter.vue

@@ -50,14 +50,15 @@
     </SfFooterColumn>
     <SfFooterColumn title="Social">
       <div class="footer__socials">
-        <SfImage class="footer__social-image" v-for="item in social" :key="item" :src="'/icons/'+item+'.svg'" :alt="item" width="32" height="32" />
+        <SfImage class="footer__social-image" v-for="item in social" :key="item" :src="addBasePath('/icons/'+item+'.svg')" :alt="item" width="32" height="32" />
       </div>
     </SfFooterColumn>
   </SfFooter>
 </template>
 
 <script>
 import { SfFooter, SfList, SfImage, SfMenuItem } from '@storefront-ui/vue';
+import { addBasePath } from '@vue-storefront/core';
 
 export default {
   components: {
@@ -66,6 +67,11 @@ export default {
     SfImage,
     SfMenuItem
   },
+  setup() {
+    return {
+      addBasePath
+    };
+  },
   data() {
     return {
       aboutUs: ['Who we are', 'Quality in the details', 'Customer Reviews'],

packages/core/nuxt-theme-module/theme/components/AppHeader.vue

@@ -8,7 +8,7 @@
       <!-- TODO: add mobile view buttons after SFUI team PR -->
       <template #logo>
         <nuxt-link :to="localePath({ name: 'home' })" class="sf-header__logo">
-          <SfImage src="/icons/logo.svg" alt="Vue Storefront Next" class="sf-header__logo-image"/>
+          <SfImage :src="addBasePath('/icons/logo.svg')" alt="Vue Storefront Next" class="sf-header__logo-image"/>
         </nuxt-link>
       </template>
       <template #navigation>
@@ -119,6 +119,7 @@ import {
 } from '@storefront-ui/vue/src/utilities/mobile-observer.js';
 import debounce from 'lodash.debounce';
 import mockedSearchProducts from '../mockedSearchProducts.json';
+import { addBasePath } from '@vue-storefront/core';
 
 export default {
   components: {
@@ -222,7 +223,8 @@ export default {
       searchBarRef,
       isMobile,
       isMobileMenuOpen,
-      removeSearchResults
+      removeSearchResults,
+      addBasePath
     };
   }
 };

packages/core/nuxt-theme-module/theme/components/CartSidebar.vue

@@ -23,7 +23,7 @@
                 v-for="product in products"
                 v-e2e="'collected-product'"
                 :key="cartGetters.getItemSku(product)"
-                :image="cartGetters.getItemImage(product)"
+                :image="addBasePath(cartGetters.getItemImage(product))"
                 :title="cartGetters.getItemName(product)"
                 :regular-price="$n(cartGetters.getItemPrice(product).regular, 'currency')"
                 :special-price="cartGetters.getItemPrice(product).special && $n(cartGetters.getItemPrice(product).special, 'currency')"
@@ -62,7 +62,7 @@
             <SfImage
               alt="Empty bag"
               class="empty-cart__image"
-              src="/icons/empty-cart.svg"
+              :src="addBasePath('/icons/empty-cart.svg')"
             />
             <SfHeading
               title="Your cart is empty"
@@ -125,6 +125,7 @@ import { computed } from '@nuxtjs/composition-api';
 import { useCart, cartGetters } from '<%= options.generate.replace.composables %>';
 import { useUiState } from '~/composables';
 import debounce from 'lodash.debounce';
+import { addBasePath } from '@vue-storefront/core';
 
 export default {
   name: 'Cart',
@@ -151,6 +152,7 @@ export default {
     }, 500);
 
     return {
+      addBasePath,
       updateQuantity,
       loading,
       products,

packages/core/nuxt-theme-module/theme/components/InstagramFeed.vue

@@ -3,28 +3,29 @@
     <div class="grid grid-images">
       <div class="grid__row">
         <div class="grid__col">
-          <SfImage v-if="isMobile" src="/homepage/imageAm.webp" alt="katherina_trn" :width="160" :height="160">katherina_trn</SfImage>
-          <SfImage v-else src="/homepage/imageAd.webp" alt="katherina_trn" :width="470" :height="470">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" :src="addBasePath('/homepage/imageAm.webp')" alt="katherina_trn" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else :src="addBasePath('/homepage/imageAd.webp')" alt="katherina_trn" :width="470" :height="470">katherina_trn</SfImage>
         </div>
         <div class="grid__col small">
-          <SfImage v-if="isMobile" src="/homepage/imageBm.webp" alt="katherina_trn" :width="160" :height="160">katherina_trn</SfImage>
-          <SfImage v-else src="/homepage/imageCd.webp" alt="katherina_trn" :width="470" :height="160">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" :src="addBasePath('/homepage/imageBm.webp')" alt="katherina_trn" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else :src="addBasePath('/homepage/imageCd.webp')" alt="katherina_trn" :width="470" :height="160">katherina_trn</SfImage>
         </div>
       </div>
       <div class="grid__row">
         <div class="grid__col small">
-          <SfImage v-if="isMobile" src="/homepage/imageCm.webp" alt="katherina_trn" :width="160" :height="160">katherina_trn</SfImage>
-           <SfImage v-else src="/homepage/imageBd.webp" alt="katherina_trn" :width="470" :height="160">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" :src="addBasePath('/homepage/imageCm.webp')" alt="katherina_trn" :width="160" :height="160">katherina_trn</SfImage>
+           <SfImage v-else :src="addBasePath('/homepage/imageBd.webp')" alt="katherina_trn" :width="470" :height="160">katherina_trn</SfImage>
         </div>
         <div class="grid__col">
-          <SfImage v-if="isMobile" src="/homepage/imageDm.webp" alt="katherina_trn" :width="160" :height="160">katherina_trn</SfImage>
-          <SfImage v-else src="/homepage/imageDd.webp" alt="katherina_trn" :width="470" :height="470">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" :src="addBasePath('/homepage/imageDm.webp')" alt="katherina_trn" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else :src="addBasePath('/homepage/imageDd.webp')" alt="katherina_trn" :width="470" :height="470">katherina_trn</SfImage>
         </div>
       </div>
     </div>
   </SfSection>
 </template>
 <script>
+import { addBasePath } from '@vue-storefront/core';
 import {
   SfSection,
   SfImage
@@ -39,6 +40,11 @@ export default {
     SfSection,
     SfImage
   },
+  setup() {
+    return {
+      addBasePath
+    };
+  },
   computed: {
     ...mapMobileObserver()
   },