diff --git a/.github/workflows/deploy-vue-storefront-cloud.yml b/.github/workflows/deploy-vue-storefront-cloud.yml index 4a3c9ce91..0d2c89cec 100644 --- a/.github/workflows/deploy-vue-storefront-cloud.yml +++ b/.github/workflows/deploy-vue-storefront-cloud.yml @@ -52,6 +52,7 @@ jobs: echo ::set-output name=name::${{ env.ENVNAME }} echo ::set-output name=code::${{ env.ENVCODE }} echo ::set-output name=middleware-url::${{ env.MIDDLEWARE_URL }} + echo ::set-output name=ssr-middleware-url::${{ env.SSR_MIDDLEWARE_URL }} - name: Create GitHub deployment id: deployment @@ -92,6 +93,7 @@ jobs: VSF_STORE_URL: '' VSF_MIDDLEWARE_URL: ${{ needs.create-deployment.outputs.environment-middleware-url }} + VSF_SSR_MIDDLEWARE_URL: ${{ needs.create-deployment.outputs.environment-ssr-middleware-url }} VSF_MAGENTO_BASE_URL: https://magento2-instance.vuestorefront.io/ VSF_MAGENTO_GRAPHQL_URL: https://magento2-instance.vuestorefront.io/graphql diff --git a/.github/workflows/public_env_info/canary b/.github/workflows/public_env_info/canary index 272ab76a2..9d0df301a 100644 --- a/.github/workflows/public_env_info/canary +++ b/.github/workflows/public_env_info/canary @@ -2,4 +2,5 @@ ENVNAME=canary ENVCODE=demo-magento2-canary BASE_URL=https://magento2stage.vuestorefront.io MIDDLEWARE_URL=https://magento2stage.vuestorefront.io/api +SSR_MIDDLEWARE_URL=http://localhost:3000/api MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql diff --git a/.github/workflows/public_env_info/dev b/.github/workflows/public_env_info/dev index e3aec0cb5..6bcbb7083 100644 --- a/.github/workflows/public_env_info/dev +++ b/.github/workflows/public_env_info/dev @@ -2,4 +2,5 @@ ENVNAME=dev ENVCODE=demo-magento2-dev BASE_URL=https://demo-magento2-dev.europe-west1.gcp.storefrontcloud.io MIDDLEWARE_URL=https://demo-magento2-dev.europe-west1.gcp.storefrontcloud.io/api +SSR_MIDDLEWARE_URL=http://localhost:3000/api MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql diff --git a/.github/workflows/public_env_info/enterprise b/.github/workflows/public_env_info/enterprise index 4d7efada1..d78b068e8 100644 --- a/.github/workflows/public_env_info/enterprise +++ b/.github/workflows/public_env_info/enterprise @@ -2,4 +2,5 @@ ENVNAME=enterprise ENVCODE=demo-magento2-enterprise BASE_URL=https://demo-magento2-enterprise.europe-west1.gcp.storefrontcloud.io MIDDLEWARE_URL=https://demo-magento2-enterprise.europe-west1.gcp.storefrontcloud.io/api +SSR_MIDDLEWARE_URL=http://localhost:3000/api MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql diff --git a/.github/workflows/public_env_info/production b/.github/workflows/public_env_info/production index d9696b5f6..6f214e8b6 100644 --- a/.github/workflows/public_env_info/production +++ b/.github/workflows/public_env_info/production @@ -2,4 +2,5 @@ ENVNAME=production ENVCODE=demo-magento2 BASE_URL=https://demo-magento2.europe-west1.gcp.vuestorefront.cloud MIDDLEWARE_URL=https://demo-magento2.europe-west1.gcp.vuestorefront.cloud/api +SSR_MIDDLEWARE_URL=http://localhost:3000/api MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql diff --git a/docs/installation-setup/configure-integration.md b/docs/installation-setup/configure-integration.md index f2e4e077b..eaa9c2466 100644 --- a/docs/installation-setup/configure-integration.md +++ b/docs/installation-setup/configure-integration.md @@ -24,6 +24,64 @@ After installation, the first step is configuring the integration using the envi 3. Update values in the `.env` file. +4. Explanation of env variables + + #### Nuxt application configuration options + ``` + VSF_NUXT_APP_ENV=development # application mode [production|development] + VSF_NUXT_APP_PORT=3000 # nuxt server port property + VSF_NUXT_APP_HOST=0.0.0.0 # nuxt server host property + ``` + + #### Storefront and middleware endpoints configuration + ``` + VSF_STORE_URL=https://localhost:3000 # external base url + VSF_MIDDLEWARE_URL=https://localhost:3000/api/ # external middleware base url + VSF_SSR_MIDDLEWARE_URL=http://localhost:3000/api/ # internal middleware base url + ``` + **NOTE**: *For many infrastructures `middleware_url` and `ssr_middleware_url` will be the same, but sometimes they might be different. For example, when it comes to deployment using a rolling-update strategy on the Kubernetes cluster, the Kubernetes is probing SSR if it's already up. SSR is trying to call middleware using an external URL (market...storefrontcloud.io) rather than localhost:3000/API, while the middleware isn't available publicly yet, because the SSR didn't respond with 200 in the first place.* + + #### Magento 2 endpoints configuration and others + ``` + VSF_MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL} + VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql + + VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false + VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL} + VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync + ``` + + #### Image provider configuration + ``` + VSF_IMAGE_PROVIDER=cloudinary + VSF_IMAGE_PROVIDER_BASE_URL=https://res-4.cloudinary.com/{YOUR_ID}/image/upload/ + VSF_IMAGE_PROVIDER_DOMAIN=https://res-4.cloudinary.com + ``` + + #### Redis cache configuration + ``` + VSF_REDIS_ENABLED=false + VSF_REDIS_HOST=127.0.0.1 + VSF_REDIS_PORT=6379 + VSF_REDIS_KEY_PREFIX= + VSF_REDIS_CACHE_INVALIDATE_URL=/cache-invalidate + ``` + #### ReCaptcha configuration + ``` + VSF_RECAPTCHA_ENABLED=false + VSF_RECAPTCHA_SITE_KEY= + VSF_RECAPTCHA_SECRET_KEY= + VSF_RECAPTCHA_HIDE_BADGE= + VSF_RECAPTCHA_SIZE=invisible + VSF_RECAPTCHA_MIN_SCORE=0.5 + VSF_RECAPTCHA_VERSION=3 + ``` + + #### Other + ``` + NODE_TLS_REJECT_UNAUTHORIZED=0 # toggle TLS verification (eg. for a local development) +``` + ### 2. Setup store configuration The `plugins/storeConfigPlugin.ts` plugin loads store configuration data from Magento and saves it into the Pinia store under the `$state.storeConfig` property. By default, the amount of data loaded from Magento is minimal to avoid over-fetching, but as your application grows, you might need to pull more data. diff --git a/packages/theme/.env.example b/packages/theme/.env.example index a9f09937a..be92f46b3 100644 --- a/packages/theme/.env.example +++ b/packages/theme/.env.example @@ -1,8 +1,11 @@ VSF_NUXT_APP_ENV=development VSF_NUXT_APP_PORT=3000 +VSF_NUXT_APP_HOST=0.0.0.0 VSF_STORE_URL=https://localhost:3000 VSF_MIDDLEWARE_URL=https://localhost:3000/api/ +VSF_SSR_MIDDLEWARE_URL=http://localhost:3000/api/ + VSF_MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL} VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql diff --git a/packages/theme/modules/core/integrationPlugin/index.ts b/packages/theme/modules/core/integrationPlugin/index.ts index 86cc09c1a..6d481ec7f 100644 --- a/packages/theme/modules/core/integrationPlugin/index.ts +++ b/packages/theme/modules/core/integrationPlugin/index.ts @@ -33,10 +33,10 @@ export const integrationPlugin = (pluginFn: NuxtPluginWithIntegration) => (nuxtC const configure = (tag: string, configuration: { api: Record }) => { const injectInContext = createAddIntegrationToCtx({ tag, nuxtCtx, inject }); const config = getIntegrationConfig(nuxtCtx, configuration); - const { middlewareUrl } = (nuxtCtx as any).$config; + const { middlewareUrl, ssrMiddlewareUrl } = (nuxtCtx as any).$config; - if (middlewareUrl) { - config.axios.baseURL = middlewareUrl; + if (middlewareUrl || ssrMiddlewareUrl) { + config.axios.baseURL = process.server ? ssrMiddlewareUrl || middlewareUrl : middlewareUrl; } // eslint-disable-next-line @typescript-eslint/no-unsafe-argument diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js index f62720cd4..7f919d3ee 100755 --- a/packages/theme/nuxt.config.js +++ b/packages/theme/nuxt.config.js @@ -33,7 +33,7 @@ export default () => { dev: process.env.VSF_NUXT_APP_ENV !== 'production', server: { port: process.env.VSF_NUXT_APP_PORT, - host: '0.0.0.0', + host: process.env.VSF_NUXT_APP_HOST || '0.0.0.0', }, head: { title: process.env.npm_package_name || '', @@ -250,9 +250,11 @@ export default () => { env: { VSF_MAGENTO_GRAPHQL_URL: process.env.VSF_MAGENTO_GRAPHQL_URL, }, - publicRuntimeConfig: { middlewareUrl: process.env.VSF_MIDDLEWARE_URL || 'http://localhost:3000/api/', + ssrMiddlewareUrl: process.env.VSF_SSR_MIDDLEWARE_URL + || process.env.VSF_MIDDLEWARE_URL + || 'http://localhost:3000/api/', }, };