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
vuestorefront · Apr 5, 2022 · de02703 · de02703
1 parent 9f0e833
commit de02703
Show file tree

Hide file tree

Showing 18 changed files with 139 additions and 311 deletions.
diff --git a/.github/workflows/deploy-vue-storefront-cloud.yml b/.github/workflows/deploy-vue-storefront-cloud.yml
@@ -26,29 +26,41 @@ 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,STORE_URL,MAGENTO_GRAPHQL_URL,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
         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 }}
+
+          STORE_URL: '' # TODO
+
+          MAGENTO_BASE_URL: https://magento2-instance.vuestorefront.io/
+          MAGENTO_GRAPHQL_URL: https://magento2-instance.vuestorefront.io/graphql
+          MAGENTO_EXTERNAL_CHECKOUT_ENABLED: false
+          MAGENTO_EXTERNAL_CHECKOUT_URL: ''
+          MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH: ''
+
+          IMAGE_PROVIDER: cloudinary
+          IMAGE_PROVIDER_BASE_URL: https://res-4.cloudinary.com/dnozky7on/image/upload/
+
+          REDIS_ENABLED: true
+          REDIS_HOST: localhost
+          REDIS_PORT: 6379
+          REDIS_KEY_PREFIX: ${{ github.sha }}
+          REDIS_CACHE_INVALIDATE_KEY: magento2vsf2
+          REDIS_CACHE_INVALIDATE_URL: /cache-invalidate
+
+          RECAPTCHA_ENABLED: false
+          RECAPTCHA_HIDE_BADGE: false
+          RECAPTCHA_VERSION: 3
+          RECAPTCHA_SIZE: invisible
+          RECAPTCHA_MIN_SCORE: 0.5
+          RECAPTCHA_SITE_KEY: 6Ldce0EeAAAAAAGGtGWG-e-SygXiFub6PXHT5fKd
           RECAPTCHA_SECRET_KEY: ${{ secrets.RECAPTCHA_SECRET_KEY }}
 
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+
   deploy-main:
     uses: ./.github/workflows/deployment-template.yml
     needs: build

diff --git a/.vuestorefrontcloud/docker/Dockerfile b/.vuestorefrontcloud/docker/Dockerfile
@@ -5,13 +5,13 @@ ARG NPM_USER
 ARG NPM_PASS
 ARG NPM_EMAIL
 ARG NPM_REGISTRY
-ARG MAGENTO_EXTERNAL_CHECKOUT
+ARG MAGENTO_EXTERNAL_CHECKOUT_ENABLED
 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 REDIS_HOST
+ARG REDIS_PORT
+ARG REDIS_CACHE_INVALIDATE_KEY
 ARG RECAPTCHA_ENABLED
 ARG RECAPTCHA_HIDE_BADGE
 ARG RECAPTCHA_VERSION
@@ -20,9 +20,9 @@ ARG RECAPTCHA_MIN_SCORE
 ARG RECAPTCHA_SITE_KEY
 ARG RECAPTCHA_SECRET_KEY
 
-ENV MAGENTO_GRAPHQL=https://magento2-instance.vuestorefront.io:8443/graphql
+ENV MAGENTO_GRAPHQL_URL=https://magento2-instance.vuestorefront.io:8443/graphql
+ENV MAGENTO_EXTERNAL_CHECKOUT_ENABLED=${MAGENTO_EXTERNAL_CHECKOUT}
 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}
@@ -32,18 +32,18 @@ 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 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_ENABLED=${RECAPTCHA_ENABLED}
+ENV RECAPTCHA_HIDE_BADGE=${RECAPTCHA_HIDE_BADGE}
+ENV RECAPTCHA_VERSION=${RECAPTCHA_VERSION}
+ENV RECAPTCHA_SIZE=${RECAPTCHA_SIZE}
+ENV RECAPTCHA_MIN_SCORE=${RECAPTCHA_MIN_SCORE}
 ENV RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY}
 ENV RECAPTCHA_SECRET_KEY=${RECAPTCHA_SITE_KEY}
 

diff --git a/.vuestorefrontcloud/docker/nuxt.config.additional.js b/.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 () => {

diff --git a/README.md b/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=sttps://{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
     ```

diff --git a/docs/guide/configuration.md b/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.IMAGE_PROVIDER
   magekit: {
-    baseURL: config.get('imageProviderBaseUrl'),
+    baseURL: process.env.IMAGE_PROVIDER_BASE_URL
   }
 },
 ```

diff --git a/docs/guide/ssr.md b/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 `REDIS_CACHE_INVALIDATE_KEY` key with two query parameters:
+* `key` — string matching the `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 `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:
 
 ## How to cache other pages
 
@@ -50,22 +50,22 @@ 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_HOST=127.0.0.1
+REDIS_PORT=6379
 REDIS_PASSWORD=
-REDIS__KEY_PREFIX=
-REDIS__CACHE_INVALIDATE_URL=/cache-invalidate
-REDIS__ENABLED=false
+REDIS_KEY_PREFIX=
+REDIS_CACHE_INVALIDATE_URL=/cache-invalidate
+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.REDIS_ENABLED,
   invalidation: {
-    endpoint: process.env.REDIS__CACHE_INVALIDATE_URL,
-    key: process.env.REDIS__CACHE_INVALIDATE_KEY,
+    endpoint: process.env.REDIS_CACHE_INVALIDATE_URL,
+    key: process.env.REDIS_CACHE_INVALIDATE_KEY,
     handlers: [
       '@vue-storefront/cache/defaultHandler',
     ],
@@ -75,9 +75,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.REDIS_KEY_PREFIX,
+        host: process.env.REDIS_HOST,
+        port: process.env.REDIS_PORT,
       },
     },
   ],

diff --git a/packages/api-client/.env.example b/packages/api-client/.env.example
@@ -1 +1 @@
-MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
+MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
diff --git a/packages/api-client/README.md b/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 `MAGENT_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`
-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

diff --git a/packages/api-client/possible-types.js b/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.MAGENTO_GRAPHQL_URL, {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({

diff --git a/packages/composables/README.md b/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 `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`
-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

diff --git a/packages/theme/.env.example b/packages/theme/.env.example
@@ -1,24 +1,27 @@
-STORE_ENV=dev
 STORE_URL=http://localhost:3000
 NUXT_APP_ENV=development
 NUXT_APP_PORT=3000
-MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
-MAGENTO_EXTERNAL_CHECKOUT=false
+
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
+
+MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false
 MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
 MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
-MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
-IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
-IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}
-REDIS__HOST=127.0.0.1
-REDIS__PORT=6379
-REDIS_PASSWORD=
-REDIS__KEY_PREFIX=
-REDIS__CACHE_INVALIDATE_URL=/cache-invalidate
-REDIS__ENABLED=false
-RECAPTCHA_ENABLED=true
-RECAPTCHA_HIDE_BADGE=false
-RECAPTCHA_VERSION=3
+
+IMAGE_PROVIDER=cloudinary
+IMAGE_PROVIDER_BASE_URL=https://res-4.cloudinary.com/{YOUR_ID}/image/upload/
+
+REDIS_ENABLED=false
+REDIS_HOST=127.0.0.1
+REDIS_PORT=6379
+REDIS_KEY_PREFIX=
+REDIS_CACHE_INVALIDATE_URL=/cache-invalidate
+
+RECAPTCHA_ENABLED=false
 RECAPTCHA_SITE_KEY=
 RECAPTCHA_SECRET_KEY=
+RECAPTCHA_HIDE_BADGE=
 RECAPTCHA_SIZE=invisible
 RECAPTCHA_MIN_SCORE=0.5
+RECAPTCHA_VERSION=3
diff --git a/packages/theme/.gitignore b/packages/theme/.gitignore
@@ -93,6 +93,5 @@ sw.*
 *.swp
 
 version
-.env
-!config/example.json
-config/*.json
+.env.*
+!.env.example