ci!: simplify env config (#813)

* ci: simplify env config

BREAKING: rename certain env vars
MAGENTO_GRAPHQL -> MAGENTO_GRAPHQL_URL
REDIS__* (HOST etc.) -> REDIS_*
MAGENTO_EXTERNAL_CHECKOUT -> MAGENTO_EXTERNAL_CHECKOUT_ENABLED
_ENABLED env vars will only enable things if you set their value to
"true" (MY_ENV_VAR=true)

remove convict and related format package because convict cannot be used
in a browser - BREAKING: use .env in packages/theme instead of packages/theme/config/[env].json

remove dotenv because nuxt already uses dotenv under the hood

stop using GitHub repository secrets that are not actually secrets

refactor: remove convict and dotenv

dotenv is already used by nuxt under the hood

remove leftover config import

add sentry_dsn to dockerfile args

* ci!: add VSF_ prefix to environment variables

add VSF_ prefix where omitted

.github/workflows/deploy-vue-storefront-cloud.yml

@@ -26,28 +26,43 @@ jobs:
           password: ${{ secrets.CLOUD_PASSWORD }}
           dockerfile: .vuestorefrontcloud/docker/Dockerfile
           buildoptions: --compress
-          buildargs: NPM_EMAIL,NPM_PASS,NPM_USER,NPM_REGISTRY,STORE_URL,MAGENTO_GRAPHQL,MAGENTO_EXTERNAL_CHECKOUT,MAGENTO_EXTERNAL_CHECKOUT_URL,MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH,IMAGE_PROVIDER,IMAGE_PROVIDER_BASE_URL,REDIS__HOST,REDIS__PORT,REDIS__CACHE_INVALIDATE_KEY,REDIS__CACHE_INVALIDATE_URL,REDIS__KEY_PREFIX,REDIS__ENABLED,SENTRY_DSN,RECAPTCHA_SITE_KEY,RECAPTCHA_SECRET_KEY
+          buildargs: NPM_EMAIL,NPM_PASS,NPM_USER,NPM_REGISTRY,LAST_COMMIT,VSF_STORE_URL,VSF_MAGENTO_BASE_URL,VSF_MAGENTO_GRAPHQL_URL,VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED,VSF_MAGENTO_EXTERNAL_CHECKOUT_URL,VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH,VSF_IMAGE_PROVIDER,VSF_IMAGE_PROVIDER_BASE_URL,VSF_REDIS_HOST,VSF_REDIS_PORT,VSF_REDIS_CACHE_INVALIDATE_KEY,VSF_REDIS_CACHE_INVALIDATE_URL,VSF_REDIS_KEY_PREFIX,VSF_REDIS_ENABLED,VSF_RECAPTCHA_ENABLED,VSF_RECAPTCHA_HIDE_BADGE,VSF_RECAPTCHA_VERSION,VSF_RECAPTCHA_SIZE,VSF_RECAPTCHA_MIN_SCORE,VSF_RECAPTCHA_SITE_KEY,VSF_RECAPTCHA_SECRET_KEY,VSF_SENTRY_DSN,
+
         env:
           NPM_EMAIL: ${{ secrets.NPM_EMAIL }}
-          NPM_PASS: ${{ secrets.CLOUD_PASSWORD }}
           NPM_USER: ${{ secrets.CLOUD_USERNAME }}
+          NPM_PASS: ${{ secrets.CLOUD_PASSWORD }}
           NPM_REGISTRY: https://registrynpm.storefrontcloud.io
-          STORE_URL: ${{ secrets.STORE_URL }}
-          MAGENTO_GRAPHQL: ${{ secrets.MAGENTO_GRAPHQL }}
-          MAGENTO_EXTERNAL_CHECKOUT: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT }}
-          MAGENTO_EXTERNAL_CHECKOUT_URL: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT_URL }}
-          MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH }}
-          IMAGE_PROVIDER: ${{ secrets.IMAGE_PROVIDER }}
-          IMAGE_PROVIDER_BASE_URL: ${{ secrets.IMAGE_PROVIDER_BASE_URL }}
-          REDIS__HOST: ${{ secrets.REDIS__HOST }}
-          REDIS__PORT: ${{ secrets.REDIS__PORT }}
-          REDIS__KEY_PREFIX: ${{ github.sha }}
-          REDIS__CACHE_INVALIDATE_KEY: ${{ secrets.REDIS__CACHE_INVALIDATE_KEY }}
-          REDIS__CACHE_INVALIDATE_URL: ${{ secrets.REDIS__CACHE_INVALIDATE_URL }}
-          REDIS__ENABLED: ${{ secrets.REDIS__ENABLED }}
-          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
-          RECAPTCHA_SITE_KEY: ${{ secrets.RECAPTCHA_SITE_KEY }}
-          RECAPTCHA_SECRET_KEY: ${{ secrets.RECAPTCHA_SECRET_KEY }}
+
+          VSF_STORE_URL: '' # TODO
+
+          VSF_MAGENTO_BASE_URL: https://magento2-instance.vuestorefront.io/
+          VSF_MAGENTO_GRAPHQL_URL: https://magento2-instance.vuestorefront.io/graphql
+          VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED: false
+          VSF_MAGENTO_EXTERNAL_CHECKOUT_URL: ''
+          VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH: ''
+
+          VSF_IMAGE_PROVIDER: cloudinary
+          VSF_IMAGE_PROVIDER_BASE_URL: https://res-4.cloudinary.com/dnozky7on/image/upload/
+
+          VSF_REDIS_ENABLED: true
+          VSF_REDIS_HOST: localhost
+          VSF_REDIS_PORT: 6379
+          VSF_REDIS_KEY_PREFIX: ${{ github.sha }}
+          VSF_REDIS_CACHE_INVALIDATE_KEY: magento2vsf2
+          VSF_REDIS_CACHE_INVALIDATE_URL: /cache-invalidate
+
+          VSF_RECAPTCHA_ENABLED: false
+          VSF_RECAPTCHA_HIDE_BADGE: false
+          VSF_RECAPTCHA_VERSION: 3
+          VSF_RECAPTCHA_SIZE: invisible
+          VSF_RECAPTCHA_MIN_SCORE: 0.5
+          VSF_RECAPTCHA_SITE_KEY: 6Ldce0EeAAAAAAGGtGWG-e-SygXiFub6PXHT5fKd
+          VSF_RECAPTCHA_SECRET_KEY: ${{ secrets.RECAPTCHA_SECRET_KEY }}
+
+          VSF_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+
+          LAST_COMMIT: ${{ github.sha  }}
 
   deploy-main:
     uses: ./.github/workflows/deployment-template.yml

.vuestorefrontcloud/docker/Dockerfile

@@ -1,51 +1,66 @@
 FROM node:16
 
-ARG COMMIT
+ARG LAST_COMMIT
 ARG NPM_USER
 ARG NPM_PASS
 ARG NPM_EMAIL
 ARG NPM_REGISTRY
-ARG MAGENTO_EXTERNAL_CHECKOUT
-ARG MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH
-ARG STORE_URL
-ARG IMAGE_PROVIDER_BASE_URL
-ARG REDIS__HOST
-ARG REDIS__PORT
-ARG REDIS__CACHE_INVALIDATE_KEY
-ARG RECAPTCHA_ENABLED
-ARG RECAPTCHA_HIDE_BADGE
-ARG RECAPTCHA_VERSION
-ARG RECAPTCHA_SIZE
-ARG RECAPTCHA_MIN_SCORE
-ARG RECAPTCHA_SITE_KEY
-ARG RECAPTCHA_SECRET_KEY
-
-ENV MAGENTO_GRAPHQL=https://magento2-instance.vuestorefront.io:8443/graphql
-ENV MAGENTO_EXTERNAL_CHECKOUT_URL=https://magento2-instance.vuestorefront.io
-ENV MAGENTO_EXTERNAL_CHECKOUT=${MAGENTO_EXTERNAL_CHECKOUT}
-ENV MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=${MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH}
-ENV STORE_URL=${STORE_URL}
-ENV LAST_COMMIT=${COMMIT}
-ENV STORE_ENV=production
-ENV NUXT_APP_ENV=production
-ENV NUXT_APP_PORT=3000
-ENV MAGENTO_BASE_URL=https://magento2-instance.vuestorefront.io/
-ENV IMAGE_PROVIDER=cloudinary
-ENV IMAGE_PROVIDER_BASE_URL=${IMAGE_PROVIDER_BASE_URL}
-ENV REDIS__HOST=${REDIS__HOST}
-ENV REDIS__PORT=${REDIS__PORT}
-ENV REDIS__CACHE_INVALIDATE_KEY=${REDIS__CACHE_INVALIDATE_KEY}
-ENV REDIS__CACHE_INVALIDATE_URL=/cache-invalidate
-ENV REDIS__KEY_PREFIX=magento2vsf2
-ENV REDIS__ENABLED=true
-ENV SENTRY_DSN=${SENTRY_DSN}
-ENV RECAPTCHA_ENABLED=false
-ENV RECAPTCHA_HIDE_BADGE=false
-ENV RECAPTCHA_VERSION=3
-ENV RECAPTCHA_SIZE=invisible
-ENV RECAPTCHA_MIN_SCORE=0.5
-ENV RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY}
-ENV RECAPTCHA_SECRET_KEY=${RECAPTCHA_SITE_KEY}
+
+ARG VSF_STORE_URL
+
+ARG VSF_MAGENTO_BASE_URL
+ARG VSF_MAGENTO_GRAPHQL_URL
+ARG VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED
+ARG VSF_MAGENTO_EXTERNAL_CHECKOUT_URL
+ARG VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH
+
+ARG VSF_IMAGE_PROVIDER
+ARG VSF_IMAGE_PROVIDER_BASE_URL
+
+ARG VSF_REDIS_ENABLED
+ARG VSF_REDIS_HOST
+ARG VSF_REDIS_PORT
+ARG VSF_REDIS_KEY_PREFIX
+ARG VSF_REDIS_CACHE_INVALIDATE_URL
+ARG VSF_REDIS_CACHE_INVALIDATE_KEY
+
+ARG VSF_RECAPTCHA_ENABLED
+ARG VSF_RECAPTCHA_HIDE_BADGE
+ARG VSF_RECAPTCHA_VERSION
+ARG VSF_RECAPTCHA_SIZE
+ARG VSF_RECAPTCHA_MIN_SCORE
+ARG VSF_RECAPTCHA_SITE_KEY
+ARG VSF_RECAPTCHA_SECRET_KEY
+
+ARG VSF_SENTRY_DSN
+
+ENV LAST_COMMIT=${LAST_COMMIT}
+
+ENV VSF_NUXT_APP_ENV=production
+ENV VSF_NUXT_APP_PORT=3000
+
+ENV VSF_MAGENTO_BASE_URL=${VSF_MAGENTO_BASE_URL}
+ENV VSF_MAGENTO_GRAPHQL_URL=${VSF_MAGENTO_GRAPHQL_URL}
+ENV VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=${VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED}
+ENV VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=${VSF_MAGENTO_EXTERNAL_CHECKOUT_URL}
+ENV VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=${VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH}
+ENV VSF_STORE_URL=${VSF_STORE_URL}
+ENV VSF_IMAGE_PROVIDER=${VSF_IMAGE_PROVIDER}
+ENV VSF_IMAGE_PROVIDER_BASE_URL=${VSF_IMAGE_PROVIDER_BASE_URL}
+ENV VSF_REDIS_ENABLED=${VSF_REDIS_ENABLED}
+ENV VSF_REDIS_HOST=${VSF_REDIS_HOST}
+ENV VSF_REDIS_PORT=${VSF_REDIS_PORT}
+ENV VSF_REDIS_KEY_PREFIX=${VSF_REDIS_KEY_PREFIX}
+ENV VSF_REDIS_CACHE_INVALIDATE_KEY=${VSF_REDIS_CACHE_INVALIDATE_KEY}
+ENV VSF_REDIS_CACHE_INVALIDATE_URL=${VSF_REDIS_CACHE_INVALIDATE_URL}
+ENV VSF_SENTRY_DSN=${VSF_SENTRY_DSN}
+ENV VSF_RECAPTCHA_ENABLED=${VSF_RECAPTCHA_ENABLED}
+ENV VSF_RECAPTCHA_HIDE_BADGE=${VSF_RECAPTCHA_HIDE_BADGE}
+ENV VSF_RECAPTCHA_VERSION=${VSF_RECAPTCHA_VERSION}
+ENV VSF_RECAPTCHA_SIZE=${VSF_RECAPTCHA_SIZE}
+ENV VSF_RECAPTCHA_MIN_SCORE=${VSF_RECAPTCHA_MIN_SCORE}
+ENV VSF_RECAPTCHA_SITE_KEY=${VSF_RECAPTCHA_SITE_KEY}
+ENV VSF_RECAPTCHA_SECRET_KEY=${VSF_RECAPTCHA_SITE_KEY}
 
 RUN npm config set @vsf-enterprise:registry=https://registrynpm.storefrontcloud.io
 

.vuestorefrontcloud/docker/nuxt.config.additional.js

@@ -1,4 +1,3 @@
-import config from '@vue-storefront/magento-theme/config';
 import baseNuxtConfig from '@vue-storefront/magento-theme/base.nuxt.config';
 
 export default () => {
@@ -11,7 +10,7 @@ export default () => {
       '@nuxtjs/sentry'
     ],
     sentry: {
-      dsn: process.env.SENTRY_DSN,
+      dsn: process.env.VSF_SENTRY_DSN,
       tracing: true,
     },
   };

README.md

@@ -79,23 +79,19 @@ Find more information about the module [GraphQl Custom Config](https://github.co
     ```bash
     yarn install
     ```
-5. Define a store running environment by adding a `STORE_ENV` to your running project or execute the code
+5. Copy `.env.example` to `.env`
     ```bash
-    echo "STORE_ENV=dev" >> .env
+    cp packages/theme/.env.example packages/theme/.env
     ```
-6. Copy `config/example.json` to an environment named config and update GraphQL Endpoint
-    ```bash
-    cp packages/theme/config/example.json packages/theme/config/dev.json
-    ```
-7. Update `magentoGraphQl` with url to Magento >=2.4.2 GraphQL endpoint, and the other variable accordingly to your store configurations.
+6. Update `MAGENTO_GRAPHQL_URL` with url to Magento >=2.4.2 GraphQL endpoint, and the other variable accordingly to your store configurations.
     ```
-    "magentoGraphQl": "https://{YOUR_SITE_FRONT_URL}/graphql",
+    MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
     ```
-8. Build dependencies `yarn build:api-client && yarn build:composables`
+7. Build dependencies `yarn build:api-client && yarn build:composables`
     ```bash
     yarn build:api-client && yarn build:composables
     ```
-9. Run `yarn dev:theme` to run theme. You can find other commands in `package.json`
+8. Run `yarn dev:theme` to run theme. You can find other commands in `package.json`
     ```bash
     yarn dev:theme
     ```

docs/guide/configuration.md

@@ -11,8 +11,8 @@ For configure the integration using `environment variables`, you can have a `.en
 STORE_ENV=dev # Store environment (Usage for file configuration)
 NUXT_APP_ENV=development # Define nuxt application environment
 NUXT_APP_PORT=3000 # Define nuxt port
-MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql # Define Magento GraphQL endpoint
-MAGENTO_EXTERNAL_CHECKOUT=false # Flag if VSF will use External Checkout
+MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql # Define Magento GraphQL endpoint
+MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false # Flag if VSF will use External Checkout
 MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL} # External checkout URL
 MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync # External Checkout synchronization path
 MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL} # base url of your Magento instance
@@ -93,9 +93,9 @@ By default, we use the `ipx` provider. that means the images are fetched from Ma
 2. Configure your provider in `nuxt.config.js`. Here is the example:
 ```javascript
 image: {
-  provider: config.get('imageProvider'),
+  provider: process.env.VSF_IMAGE_PROVIDER
   magekit: {
-    baseURL: config.get('imageProviderBaseUrl'),
+    baseURL: process.env.VSF_IMAGE_PROVIDER_BASE_URL
   }
 },
 ```

docs/guide/ssr.md

@@ -17,11 +17,11 @@ The cached pages are:
 
 To invalidate a tag and remove pages associated with that tag, use the [Invalidation endpoint](https://docs.vuestorefront.io/v2/performance/ssr-cache.html#invalidating-tags).
 
-Go to the route configured in the `.env` file under the `REDIS__CACHE_INVALIDATE_KEY` key with two query parameters:
-* `key` — string matching the `REDIS__CACHE_INVALIDATE_KEY` key in the `.env` file.
+Go to the route configured in the `.env` file under the `VSF_REDIS_CACHE_INVALIDATE_KEY` key with two query parameters:
+* `key` — string matching the `VSF_REDIS_CACHE_INVALIDATE_KEY` key in the `.env` file.
 * `tags` — a comma-separated list of tags for invalidation.
 
-Assuming that you are running the application locally, the `REDIS__CACHE_INVALIDATE_URL` key is equal to `/cache-invalidate,` and the `REDIS__CACHE_INVALIDATE_KEY` key is equal to `secret_key`, and you want to invalidate the `Vhome` tag, the full URL will look like this:
+Assuming that you are running the application locally, the `VSF_REDIS_CACHE_INVALIDATE_URL` key is equal to `/cache-invalidate,` and the `VSF_REDIS_CACHE_INVALIDATE_KEY` key is equal to `secret_key`, and you want to invalidate the `Vhome` tag, the full URL will look like this:
 
 ## How to cache other pages
 
@@ -50,22 +50,21 @@ Once you have the Redis driver installed, you need to add the Redis configuratio
 
 ```
 .env
-REDIS__HOST=127.0.0.1
-REDIS__PORT=6379
-REDIS_PASSWORD=
-REDIS__KEY_PREFIX=
-REDIS__CACHE_INVALIDATE_URL=/cache-invalidate
-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
+VSF_REDIS_ENABLED=true
 ```
 
 Then you have to update `nuxt.config.js file` and add this to the `modules` object:
 
 ```javascript
 ['@vue-storefront/cache/nuxt', {
-  enabled: process.env.REDIS__ENABLED,
+  enabled: process.env.VSF_REDIS_ENABLED,
   invalidation: {
-    endpoint: process.env.REDIS__CACHE_INVALIDATE_URL,
-    key: process.env.REDIS__CACHE_INVALIDATE_KEY,
+    endpoint: process.env.VSF_REDIS_CACHE_INVALIDATE_URL,
+    key: process.env.VSF_REDIS_CACHE_INVALIDATE_KEY,
     handlers: [
       '@vue-storefront/cache/defaultHandler',
     ],
@@ -75,9 +74,9 @@ Then you have to update `nuxt.config.js file` and add this to the `modules` obje
     {
       // docs: https://github.com/luin/ioredis/blob/master/API.md#new-redisport-host-options
       redis: {
-        keyPrefix: process.env.REDIS__KEY_PREFIX,
-        host: process.env.REDIS__HOST,
-        port: process.env.REDIS__PORT,
+        keyPrefix: process.env.VSF_REDIS_KEY_PREFIX,
+        host: process.env.VSF_REDIS_HOST,
+        port: process.env.VSF_REDIS_PORT,
       },
     },
   ],

packages/api-client/.env.example

@@ -1 +1 @@
-MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
+VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql

packages/api-client/README.md

@@ -71,20 +71,16 @@ Find more information about the module [GraphQl Custom Config](https://github.co
     ```
 3. Checkout develop branch `git checkout develop`
 4. Run `yarn` to install dependencies
-5. Define a store running environment by adding a `STORE_ENV` to your running project or execute the code
+5. Copy `.env.example` to `.env`
     ```bash
-    $ echo "STORE_ENV=dev" >> .env
+    $ cp packages/theme/.env.example packages/theme/config/.env
     ```
-6. Copy `config/example.json` to an environment named config and update GraphQL Endpoint
-    ```bash
-    $ cp packages/theme/config/example.json packages/theme/config/dev.json
-    ```
-7. Update `magentoGraphQl` with url to Magento >=2.4.2 GraphQL endpoint, and the other variable accordingly to your store configurations.
+6. Update `VSF_MAGENTO_GRAPHQL_URL` with url to Magento >=2.4.2 GraphQL endpoint, and the other variable accordingly to your store configurations.
     ```
-    "magentoGraphQl": "https://{YOUR_SITE_FRONT_URL}/graphql",
+    VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
     ```
-8. Build dependencies `yarn build:api-client && yarn build:composables`
-9. Run `yarn dev:theme` to run theme. You can find other commands in `package.json`
+7. Build dependencies `yarn build:api-client && yarn build:composables`
+8. Run `yarn dev:theme` to run theme. You can find other commands in `package.json`
 - If you need HMR on Api Client/Composables run `yarn dev:api-client` or `yarn dev:composables` on a separate terminal window.
 
 ## Resources

packages/api-client/possible-types.js

@@ -2,7 +2,7 @@ require('dotenv').config();
 const fetch = require('cross-fetch');
 const fs = require('fs');
 
-fetch(process.env.MAGENTO_GRAPHQL, {
+fetch(process.env.VSF_MAGENTO_GRAPHQL_URL, {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({

packages/composables/README.md

@@ -71,20 +71,16 @@ Find more information about the module [GraphQl Custom Config](https://github.co
     ```
 3. Checkout develop branch `git checkout develop`
 4. Run `yarn` to install dependencies
-5. Define a store running environment by adding a `STORE_ENV` to your running project or execute the code
+5. Copy `.env.example` to `.env`
     ```bash
-    $ echo "STORE_ENV=dev" >> .env
+    $ cp packages/theme/.env.example packages/theme/.env
     ```
-6. Copy `config/example.json` to an environment named config and update GraphQL Endpoint
-    ```bash
-    $ cp packages/theme/config/example.json packages/theme/config/dev.json
-    ```
-7. Update `magentoGraphQl` with url to Magento >=2.4.2 GraphQL endpoint, and the other variable accordingly to your store configurations.
+6. Update `VSF_MAGENTO_GRAPHQL_URL` with url to Magento >=2.4.2 GraphQL endpoint, and the other variable accordingly to your store configurations.
     ```
-    "magentoGraphQl": "https://{YOUR_SITE_FRONT_URL}/graphql",
+    VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
     ```
-8. Build dependencies `yarn build:api-client && yarn build:composables`
-9. Run `yarn dev:theme` to run theme. You can find other commands in `package.json`
+7. Build dependencies `yarn build:api-client && yarn build:composables`
+8. Run `yarn dev:theme` to run theme. You can find other commands in `package.json`
 - If you need HMR on Api Client/Composables run `yarn dev:api-client` or `yarn dev:composables` on a separate terminal window.
 
 ## Resources