Dynamic config reload OR just to use the ENV variables for endpoint hosts and key variables

[ismailyenigul]

I installed vue-storefront-1.0.5 and modifed config/local.json file.
replaced all localhost:8080 to http://myhostname:8080 in local.json

There is not localhost string in local.cf but I see that vue-storefront still tries to connect localhost:8080
for some requests.

Is there any other place to replace api url?

[pkarw]

Config files are being read only during the compilation process. Have you restarted “yarn dev” after changing the endpoints? Please also “Clear Storage” in the browser developer tools “Application” pane. Let me know if the problem still exists.

[ismailyenigul]

Thanks for the update.
But I am still looking for where to update for localhost:8080/api/user/create calls?
Everything in local.json refers to my custom domain url.

[pkarw]

Please attach the default + local jsons to let me check it

[ismailyenigul]

local.json

more config/local.json
{
"server": {
"host": "167.99.181.100",
"port": 3000
},
"elasticsearch": {
"httpAuth": "",
"host": "http://vuestore.ysrtech.net:8080/api/catalog",
"index": "vue_storefront_catalog"
},
"ssr": {
"executeMixedinAsyncData": true
},
"storeViews": {
"multistore": false,
"mapStoreUrlsFor": [
"de",
"it"
],
"de": {
"storeCode": "de",
"disabled": true,
"storeId": 3,
"name": "German Store",
"url": "/de",
"elasticsearch": {
"host": "167.99.181.100:8080/api/catalog",
"index": "vue_storefront_catalog_de"
},
"tax": {
"defaultCountry": "DE",
"defaultRegion": "",
"calculateServerSide": true
},
"i18n": {
"fullCountryName": "Germany",
"fullLanguageName": "German",
"defaultLanguage": "DE",
"defaultCountry": "DE",
"defaultLocale": "de-DE",
"currencyCode": "EUR",
"currencySign": "EUR",
"dateFormat": "HH:mm D-M-YYYY"
}
},
"it": {
"storeCode": "it",
"disabled": true,
"storeId": 4,
"name": "Italian Store",
"url": "/it",
"elasticsearch": {
"host": "167.99.181.100:8080/api/catalog",
"index": "vue_storefront_catalog_it"
},
"tax": {
"defaultCountry": "IT",
"defaultRegion": "",
"calculateServerSide": true
},
"i18n": {
"fullCountryName": "Italy",
"fullLanguageName": "Italian",
"defaultCountry": "IT",
"defaultLanguage": "IT",
"defaultLocale": "it-IT",
"currencyCode": "EUR",
"currencySign": "EUR",
"dateFormat": "HH:mm D-M-YYYY"
}
}
},
"entities": {
"optimize": true,
"twoStageCaching": true,
"category": {
"includeFields": [
"children_data",
"id",
"children_count",
"sku",
"name",
"is_active",
"parent_id",
"level"
]
},
"attribute": {
"includeFields": [
"attribute_code",
"id",
"entity_type_id",
"options",
"default_value",
"is_user_defined",
"frontend_label",
"attribute_id",
"default_frontend_label",
"is_visible_on_front",
"is_visible",
"is_comparable"
]
},
"productList": {
"sort": "",
"includeFields": [
"type_id",
"sku",
"product_links",
"tax_class_id",
"special_price",
"special_to_date",
"special_from_date",
"name",
"price",
"priceInclTax",
"originalPriceInclTax",
"originalPrice",
"specialPriceInclTax",
"id",
"image",
"sale",
"new"
],
"excludeFields": [
"configurable_children",
"description",
"configurable_options",
"sgn"
]
},
"productListWithChildren": {
"includeFields": [
"type_id",
"sku",
"name",
"tax_class_id",
"special_price",
"special_to_date",
"special_from_date",
"price",
"priceInclTax",
"originalPriceInclTax",
"originalPrice",
"specialPriceInclTax",
"id",
"image",
"sale",
"new",
"configurable_children.image",
"configurable_children.sku",
"configurable_children.price",
"configurable_children.special_price",
"configurable_children.priceInclTax",
"configurable_children.specialPriceInclTax",
"configurable_children.originalPrice",
"configurable_children.originalPriceInclTax",
"configurable_children.color",
"configurable_children.size",
"product_links"
],
"excludeFields": [
"description",
"sgn"
]
},
"product": {
"excludeFields": [
"updated_at",
"created_at",
"attribute_set_id",
"status",
"visibility",
"tier_prices",
"options_container",
"url_key",
"msrp_display_actual_price_type",
"has_options",
"stock.manage_stock",
"stock.use_config_min_qty",
"stock.use_config_notify_stock_qty",
"stock.stock_id",
"stock.use_config_backorders",
"stock.use_config_enable_qty_inc",
"stock.enable_qty_increments",
"stock.use_config_manage_stock",
"stock.use_config_min_sale_qty",
"stock.notify_stock_qty",
"stock.use_config_max_sale_qty",
"stock.use_config_max_sale_qty",
"stock.qty_increments",
"small_image"
],
"includeFields": null
}
},
"cart": {
"server_merge_by_default": true,
"synchronize": true,
"synchronize_totals": true,
"setCustomProductOptions": true,
"setConfigurableProductOptions": true,
"create_endpoint": "http://167.99.181.100:8080/api/cart/create?token={{token}}",
"updateitem_endpoint": "http://167.99.181.100:8080/api/cart/update?token={{token}}&cartId={{cartId}}",
"deleteitem_endpoint": "http://167.99.181.100:8080/api/cart/delete?token={{token}}&cartId={{cartId}}",
"pull_endpoint": "http://167.99.181.100:8080/api/cart/pull?token={{token}}&cartId={{cartId}}",
"totals_endpoint": "http://167.99.181.100:8080/api/cart/totals?token={{token}}&cartId={{cartId}}",
"paymentmethods_endpoint": "http://167.99.181.100:8080/api/cart/payment-methods?token={{token}}&cartId={{cartId}}",
"shippingmethods_endpoint": "http://167.99.181.100:8080/api/cart/shipping-methods?token={{token}}&cartId={{cartId}}",
"shippinginfo_endpoint": "http://167.99.181.100:8080/api/cart/shipping-information?token={{token}}&cartId={{cartId}}",
"collecttotals_endpoint": "http://167.99.181.100:8080/api/cart/collect-totals?token={{token}}&cartId={{cartId}}",
"deletecoupon_endpoint": "http://167.99.181.100:8080/api/cart/delete-coupon?token={{token}}&cartId={{cartId}}",
"applycoupon_endpoint": "http://167.99.181.100:8080/api/cart/apply-coupon?token={{token}}&cartId={{cartId}}"
},
"products": {
"configurableChildrenStockPrefetchStatic": false,
"configurableChildrenStockPrefetchDynamic": false,
"configurableChildrenStockPrefetchStaticPrefetchCount": 8,
"filterUnavailableVariants": false,
"preventConfigurableChildrenDirectAccess": true,
"alwaysSyncPlatformPricesOver": false,
"clearPricesBeforePlatformSync": false,
"waitForPlatformSync": false,
"setupVariantByAttributeCode": true,
"endpoint": "http://167.99.181.100:8080/api/product",
"defaultFilters": [
"color",
"size",
"price",
"erin_recommends"
],
"galleryVariantsGroupAttribute": "color"
},
"orders": {
"endpoint": "http://167.99.181.100:8080/api/order",
"payment_methods_mapping": {}
},
"users": {
"autoRefreshTokens": true,
"endpoint": "http://167.99.181.100:8080/api/user",
"history_endpoint": "http://167.99.181.100:8080/api/user/order-history?token={{token}}",
"resetPassword_endpoint": "http://167.99.181.100:8080/api/user/resetPassword",
"changePassword_endpoint": "http://167.99.181.100:8080/api/user/changePassword?token={{token}}",
"login_endpoint": "http://167.99.181.100:8080/api/user/login",
"create_endpoint": "http://167.99.181.100:8080/api/user/create",
"me_endpoint": "http://167.99.181.100:8080/api/user/me?token={{token}}",
"refresh_endpoint": "http://167.99.181.100:8080/api/user/refresh"
},
"stock": {
"synchronize": true,
"allowOutOfStockInCart": true,
"endpoint": "http://167.99.181.100:8080/api/stock"
},
"images": {
"baseUrl": "https://demo.vuestorefront.io/img/",
"productPlaceholder": "/assets/placeholder.jpg"
},
"install": {
"is_local_backend": true,
"backend_dir": "../vue-storefront-api"
},
"demomode": true,
"tax": {
"defaultCountry": "PL",
"defaultRegion": "",
"calculateServerSide": true
},
"i18n": {
"defaultCountry": "US",
"defaultLanguage": "EN",
"availableLocale": [
"en-US",
"de-DE",
"fr-FR",
"es-ES",
"nl-NL",
"jp-JP",
"ru-RU",
"it-IT",
"pt-BR",
"pl-PL"
],
"defaultLocale": "en-US",
"currencyCode": "USD",
"currencySign": "$",
"dateFormat": "HH:mm D/M/YYYY",
"fullCountryName": "United States",
"fullLanguageName": "English"
},
"mailchimp": {
"endpoint": "http://167.99.181.100:8080/api/ext/mailchimp-subscribe/subscribe"
},
"theme": "@vue-storefront/theme-default",
"analytics": {
"id": false
},
"stripe": {
"api_key": "my_example_api_key"
}
}

default.json

more config/default.json

{
"server": {
"host": "localhost",
"port": 3000
},
"elasticsearch": {
"httpAuth": "",
"host": "localhost:8080/api/catalog",
"index": "vue_storefront_catalog"
},
"ssr": {
"executeMixedinAsyncData": true
},
"storeViews": {
"multistore": false,
"mapStoreUrlsFor": ["de", "it"],
"de": {
"storeCode": "de",
"disabled": true,
"storeId": 3,
"name": "German Store",
"url": "/de",
"elasticsearch": {
"host": "localhost:8080/api/catalog",
"index": "vue_storefront_catalog_de"
},
"tax": {
"defaultCountry": "DE",
"defaultRegion": "",
"calculateServerSide": true
},
"i18n": {
"fullCountryName": "Germany",
"fullLanguageName": "German",
"defaultLanguage": "DE",
"defaultCountry": "DE",
"defaultLocale": "de-DE",
"currencyCode": "EUR",
"currencySign": "EUR",
"dateFormat": "HH:mm D-M-YYYY"
}
},
"it": {
"storeCode": "it",
"disabled": true,
"storeId": 4,
"name": "Italian Store",
"url": "/it",
"elasticsearch": {
"host": "localhost:8080/api/catalog",
"index": "vue_storefront_catalog_it"
},
"tax": {
"defaultCountry": "IT",
"defaultRegion": "",
"calculateServerSide": true
},
"i18n": {
"fullCountryName": "Italy",
"fullLanguageName": "Italian",
"defaultCountry": "IT",
"defaultLanguage": "IT",
"defaultLocale": "it-IT",
"currencyCode": "EUR",
"currencySign": "EUR",
"dateFormat": "HH:mm D-M-YYYY"
}
}
},
"entities": {
"optimize": true,
"twoStageCaching": true,
"category": {
"includeFields": [ "children_data", "id", "children_count", "sku", "name", "is_active", "parent_id", "level" ]
},
"attribute": {
"includeFields": [ "attribute_code", "id", "entity_type_id", "options", "default_value", "is_user_defined", "frontend_label",
"attribute_id", "default_frontend_label", "is_visible_on_front", "is_visible", "is_comparable" ]
},
"productList": {
"sort": "",
"includeFields": [ "type_id", "sku", "product_links", "tax_class_id", "special_price", "special_to_date", "special_from_date",
"name", "price", "priceInclTax", "originalPriceInclTax", "originalPrice", "specialPriceInclTax", "id", "image", "sale", "new" ],
"excludeFields": [ "configurable_children", "description", "configurable_options", "sgn" ]
},
"productListWithChildren": {
"includeFields": [ "type_id", "sku", "name", "tax_class_id", "special_price", "special_to_date", "special_from_date", "price",
"priceInclTax", "originalPriceInclTax", "originalPrice", "specialPriceInclTax", "id", "image", "sale", "new", "configurable_children.
image", "configurable_children.sku", "configurable_children.price", "configurable_children.special_price", "configurable_children.pric
eInclTax", "configurable_children.specialPriceInclTax", "configurable_children.originalPrice", "configurable_children.originalPriceInc
lTax", "configurable_children.color", "configurable_children.size", "product_links" ],
"excludeFields": [ "description", "sgn"]
},
"product": {
"excludeFields": [ "updated_at", "created_at", "attribute_set_id", "status", "visibility", "tier_prices", "options_container",
"url_key", "msrp_display_actual_price_type", "has_options", "stock.manage_stock", "stock.use_config_min_qty", "stock.use_config_notif
y_stock_qty", "stock.stock_id", "stock.use_config_backorders", "stock.use_config_enable_qty_inc", "stock.enable_qty_increments", "sto
ck.use_config_manage_stock", "stock.use_config_min_sale_qty", "stock.notify_stock_qty", "stock.use_config_max_sale_qty", "stock.use_co
nfig_max_sale_qty", "stock.qty_increments", "small_image"],
"includeFields": null
}
},
"cart": {
"server_merge_by_default": true,
"synchronize": true,
"synchronize_totals": true,
"setCustomProductOptions": true,
"setConfigurableProductOptions": true,
"create_endpoint": "http://localhost:8080/api/cart/create?token={{token}}",
"updateitem_endpoint": "http://localhost:8080/api/cart/update?token={{token}}&cartId={{cartId}}",
"deleteitem_endpoint": "http://localhost:8080/api/cart/delete?token={{token}}&cartId={{cartId}}",
"pull_endpoint": "http://localhost:8080/api/cart/pull?token={{token}}&cartId={{cartId}}",
"totals_endpoint": "http://localhost:8080/api/cart/totals?token={{token}}&cartId={{cartId}}",
"paymentmethods_endpoint": "http://localhost:8080/api/cart/payment-methods?token={{token}}&cartId={{cartId}}",
"shippingmethods_endpoint": "http://localhost:8080/api/cart/shipping-methods?token={{token}}&cartId={{cartId}}",
"shippinginfo_endpoint": "http://localhost:8080/api/cart/shipping-information?token={{token}}&cartId={{cartId}}",
"collecttotals_endpoint": "http://localhost:8080/api/cart/collect-totals?token={{token}}&cartId={{cartId}}",
"deletecoupon_endpoint": "http://localhost:8080/api/cart/delete-coupon?token={{token}}&cartId={{cartId}}",
"applycoupon_endpoint": "http://localhost:8080/api/cart/apply-coupon?token={{token}}&cartId={{cartId}}&coupon={{coupon}}"
},
"products": {
"configurableChildrenStockPrefetchStatic": false,
"configurableChildrenStockPrefetchDynamic": false,
"configurableChildrenStockPrefetchStaticPrefetchCount": 8,
"filterUnavailableVariants": false,
"preventConfigurableChildrenDirectAccess": true,
"alwaysSyncPlatformPricesOver": false,
"clearPricesBeforePlatformSync": false,
"waitForPlatformSync": false,
"setupVariantByAttributeCode": true,
"endpoint": "http://localhost:8080/api/product",
"defaultFilters": ["color", "size", "price", "erin_recommends"],
"galleryVariantsGroupAttribute": "color"
},
"orders": {
"endpoint": "http://localhost:8080/api/order",
"payment_methods_mapping": {
}
},
"users": {
"autoRefreshTokens": true,
"endpoint": "http://localhost:8080/api/user",
"history_endpoint": "http://localhost:8080/api/user/order-history?token={{token}}",
"resetPassword_endpoint": "http://localhost:8080/api/user/resetPassword",
"changePassword_endpoint": "http://localhost:8080/api/user/changePassword?token={{token}}",
"login_endpoint": "http://localhost:8080/api/user/login",
"create_endpoint": "http://localhost:8080/api/user/create",
"me_endpoint": "http://localhost:8080/api/user/me?token={{token}}",
"refresh_endpoint": "http://localhost:8080/api/user/refresh"
},
"stock": {
"synchronize": true,
"allowOutOfStockInCart": true,
"endpoint": "http://localhost:8080/api/stock"
},
"images": {
"baseUrl": "https://demo.vuestorefront.io/img/",
"productPlaceholder": "/assets/placeholder.jpg"
},
"install": {
"is_local_backend": true,
"backend_dir": "../vue-storefront-api"
},
"demomode": true,
"tax": {
"defaultCountry": "PL",
"defaultRegion": "",
"calculateServerSide": true
},
"i18n": {
"defaultCountry": "US",
"defaultLanguage": "EN",
"availableLocale": ["en-US","de-DE","fr-FR","es-ES","nl-NL", "jp-JP", "ru-RU", "it-IT", "pt-BR", "pl-PL"],
"defaultLocale": "en-US",
"currencyCode": "USD",
"currencySign": "$",
"dateFormat": "HH:mm D/M/YYYY",
"fullCountryName": "United States",
"fullLanguageName": "English"
},
"mailchimp": {
"endpoint": "http://localhost:8080/api/ext/mailchimp-subscribe/subscribe"
},
"theme": "@vue-storefront/theme-default",
"analytics": {
"id": false
},
"stripe": {
"api_key": "my_example_api_key"
}
}

[pkarw]

The config looks good at a first glance. Please let me know which exact requests go to the localhost? It may help me spot the problem.

Please also do confirm that after chaning the config you've restarted the app + cleared the browser storage?

[mingfang]

I'm seeing the same problem.

The exact urls are http://localhost:8080/api/cart/create?token=, and pretty much every api call.
Having to run build to change the url is not acceptable.
I build once and promote from dev to qa to prod with different config files and can't do another build.

[pkarw]

Thanks, so definitely we need to add the support of dynamic config variables via env

[mingfang]

I think some of the config are too complex and numerous to use env variables.
The best approach is to dynamically read the json files at runtime.
I've used node-config to do that before.

As for the URLs configs specifically, there's no reason to even config it if the expectation is to front everything with nginx. The frontend should simply append "/api" to the url from the address bar.

[pkarw]

@mingfang one of the solutions is to use the custom-environment-variables.json - it allows You to bind specific settings to ENV variables

root@dev:~/pszreder/vue-storefront/config# cat custom-environment-variables.json
{
  "server": {
    "host": "BIND_HOST",
    "port": "BIND_PORT"
  }
}

[mingfang]

The solution is to name the json file to be the same as NODE_ENV, e.g. if NODE_ENV=production then the config file should be production.json.