Vue store front magento2. Categories but no products

Hi All,

I am trying to setup a tets environment for vue storefront together with Magento2.

Currently i have two EC2 instances running in AWS. One server with Magento 2.3.x and one server running vue storefront + vue storefront API.

I have added both config files as a pastbin (removed some domain names and API keys from the config files and replaced this with the word “REMOVED”).

Vue-storefront-api config - https://pastebin.com/TXQ20d8Q
Vue-storefront config - https://pastebin.com/mguMY2z0

I am using mage2vuestorefront

Loading docker images goes fine, no errors.

I have run the import to create data and indices in elastic search. After this i have run a rebuild of the database. No errors so far…

When vue store front is loaded i can see the default home page and the categories from Magento2. When i browse to the categories i see no products.

When press refresh in my browser the products appear and dissapear in a couple of seconds. See images.

Anybody has any idea? Any log files i could check perhaps?Totally stuck at the moment.

The output generated on the side of vue storefront if i run the docker image without detach option it will output this when i browse to the categorie.

app_1 | whole request [/men/gender-7]: 383ms
app_1 | [vuex] state field “url” was overridden by a module with the same name at “url”
app_1 | [vuex] state field “product” was overridden by a module with the same name at “product”
app_1 | [vuex] state field “attribute” was overridden by a module with the same name at “attribute”
app_1 | [vuex] state field “stock” was overridden by a module with the same name at “stock”
app_1 | [vuex] state field “category” was overridden by a module with the same name at “category”
app_1 | [vuex] state field “shipping” was overridden by a module with the same name at “shipping”
app_1 | [vuex] state field “checkout” was overridden by a module with the same name at “checkout”
app_1 | [vuex] state field “cart” was overridden by a module with the same name at “cart”
app_1 | [vuex] state field “wishlist” was overridden by a module with the same name at “wishlist”
app_1 | [vuex] state field “user” was overridden by a module with the same name at “user”
app_1 | [vuex] state field “compare” was overridden by a module with the same name at “compare”
app_1 | [GTM] Google Tag Manager extensions is not working. Ensure Google Tag Manager container ID is defined in config null
app_1 | [vuex] state field “newsletter” was overridden by a module with the same name at “newsletter”
app_1 | [module] VS Modules registration finished. { succesfulyRegistered: ‘0 / 0’, registrationOrder: [] }
app_1 | [vuex] state field “ui” was overridden by a module with the same name at “ui”
app_1 | Entity cache is enabled for productList null
app_1 | Result from ES for c16b17140e676ce67937cbe1f123ae73dee822bb6cbc24f5d61af53a (attribute), ms=17 null
app_1 | Result from ES for 208dd8dc1a18bbb889053d847799d6fe51b9b61a9271798334102e46 (product), ms=36 null
app_1 | Taxes calculated server side, skipping null
app_1 | Result from ES for 17778654bc2eecd404d6b34d43a2834523b0d94474c6625154afaf89 (category), ms=18 null
app_1 | Result from ES for 035e2b1127ef5c04990ad39c05a987e89f9f9c6bcd59e762e7931a17 (category), ms=20 null
app_1 | Result from ES for 1e0ccf5fe3c47d94ce77dcee4e662743957565742fcd4c351e8658c8 (category), ms=25 null
app_1 | Result from ES for 889eeae7ba659a789f0f6223062be7487ffa0476139ba93390658c99 (product), ms=39 null
app_1 | Taxes calculated server side, skipping null
app_1 | Result from ES for 0661ab7430ebf58359e092f995ab88a8b41644a8ddab7d4a72d9e2bc (category), ms=9 null
app_1 | Top-most asyncData executed null
app_1 | Result from ES for c96372e4ead8219784a7cd9b1764e06cad740f95b50452f608e65eaf (category), ms=19 null
app_1 | HTML Minifier is enabled
app_1 | whole request [/apparel/apparel-11]: 641ms

P.S. I tried to use the the VSBridge in Magento2 instead of the native Mage2VS module. When setting this up and running the indexer it says the following.

:~/apps/magento/htdocs$ sudo bin/magento-cli vsbridge:reindex --store=PYF_EU_DE_VIEW
Store Pruno_y_Fifi EU-DE view is not allowed.
Reindexing all VS indexes for store Pruno_y_Fifi EU-DE view…
Vsbridge Cms Block Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Cms Page Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Product Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Category Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Attributes Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Review Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Tax Rule Indexer index has been rebuilt successfully in 00:00:00
Index name: vue_storefront_magento_pyf_eu_de_view_1586955190, index alias: vue_storefront_magento_pyf_eu_de_view
Reindexing has completed!
bitnami@ip-172-31-6-179:~/apps/magento/htdocs$ sudo bin/magento-cli vsbridge:reindex --store=PYF_EU_NL_VIEW
Reindexing all VS indexes for store Pruno_y_Fifi EU-NL view…
Vsbridge Cms Block Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Cms Page Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Product Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Category Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Attributes Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Review Indexer index has been rebuilt successfully in 00:00:00
Vsbridge Tax Rule Indexer index has been rebuilt successfully in 00:00:00
Index name: vue_storefront_magento_1586955197, index alias: vue_storefront_magento
Reindexing has completed!
Store Pruno_y_Fifi EU-NL view is not allowed.

What does Store Pruno_y_Fifi EU-NL view is not allowed means in this context? I can’t find it in the docs/forums.

Hi There,
Two things need to be done to solve the problem:
one install VSBridge mangto extension to your magento store

https://github.com/DivanteLtd/magento2-vsbridge-indexer

another add your magento url to allowed host in vsf-api config to get product images.

"whitelist": {
  "allowedHosts": [".*divante.pl", ".*vuestorefront.io"]
},

Thanks!

sorry for the late response but this is already the case…

Seems that all the information is getting into the ES database. When i refresh the site i can see the products and catagories for a short while, than they dissapear again.

I solved it.

I had references to localhost in my config file (vue-storefront), should have been the IP / domain name.

I am facing same issue, can you share your config file.

Vishal maybe you can join the slack channel so i could help you directly with the config file? My Name is Jack Dekker in the slack channel.

Make sure that in the vue storefront config file (not the API one) that the API url is pointing to the IP address of the server where vue-storefront-api is running, instead of localhost:8080 you put in a IP address. This was the case for me since it does not run on my magento server but on a seperate server.

I integrate the vue-storefront with Magento 1 using vsbridge.
I have debugged my self and I have seen one error in console when open category page,
"Category.vue:113 Problem with setting Category initial data! TypeError: Cannot read property ‘id’ of null"

I have attached my local.json file of vue-storefront.
https://pastebin.com/px51E4nz

I have followed the below documents for integration.

Please tell me know if I have missed something.

Replace the localhost of the below to the IP address of the server where vue storefront api is running. This could be either the external IP address (make sure ports can be reached) or your internal IP when running it internal.

  1. “redis”: {

  2. “host”: “localhost”,

  3. “port”: 6379,

  4. “db”: 0

  5. },

  6. “graphql”:{

  7. “host”: “localhost”,

  8. “port”: 8080

  9. },

  10. “api”: {

  11. “url”: “http://localhost:8080”,

  12. “saveBandwidthOverCache”: true

  13. },