Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals On-Demand course

Configuring ElasticSearch in PWA & API

Duration: 10:00 | Last Modified 30 August 2021

This is a lesson preview of our Yireo On-Demand training on Vue Storefront 1 Fundamentals

This is a preview lesson only

Note that this is a preview lesson. When accessing this lesson as part of the full training, there are a couple of benefits: The materials are available via the Yireo Courseware portal and can be presented as a slideshow, progress can be monitored, additional resources will be available. And obviously, all lessons - instead of just the preview lessons - will be available to you.

Get full access to the Vue Storefront 1 Fundamentals training

Student notes

Configuring ElasticSearch in PWA & API

Once ElasticSearch is setup, there are two connections that we need to make. One, the connection between Magento and ElasticSearch. Two, the connection from the PWA to the API to ElasticSearch. In this lesson we are going to deal with that last connection.

Configuring ElasticSearch in PWA & API

  • PWA configuration
  • API configuration

While the API connects directly to ElasticSearch, the PWA still needs to configured properly as well. Not because the PWA is able to connect directly to the ElasticSearch instance, but because the URLs need to conform to the right configuration (like an ElasticSearch index alias).

PWA configuration of ElasticSearch

PWA configuration file local.json:

"elasticsearch": {
  "host": "http://localhost:8080/api/catalog",
  "index": "vue_storefront_catalog",
}
"storeViews": {
  "de": {
    "elasticsearch": {
      "host": "http://localhost:8080/api/catalog",
      "index": "vue_storefront_catalog_de"
    },
  }
}

The configuration path exists in both the root (elasticsearch.index) and per Store View, for instance storeViews.en.elasticsearch.index. Note that the VSF API is running on port 8080, while ElasticSearch commonly runs on port 9200.

The PWA configuration contains a section elasticsearch with a host and an index. The host needs to point towards the VSF1 API URL plus a suffix api/catalog. This basically means that any search query initiated from the PWA will be passed on to the API URL api/catalog, where a specific API module is proxying the query towards the ElasticSearch instance. Do not make the mistake of entering the ElasticSearch node here directly.

The index needs to correspond with the right ElasticSearch index. If the index is not there in ElasticSearch, then this will give 404 errors in the API, which leads to server errors in the PWA. A simple check is to append the host and the index and navigate to that URL: http://localhost:8080/api/catalog/vue_storefront_catalog If that gives result, it proofs that the API is able to proxy ElasticSearch running on port 9200.

The settings are found both in the root of the configuration and per Store View (under storeViews). Every Store View is indexed to its own ElasticSearch index. For instance, if you have a German Store View in Magento which is indexed to the ElasticSearch index vue_storefront_catalog_de, the following section would represent this:

{
  "storeViews": {
    "de": {
      "storeCode": "de",
      "storeId": 3,
      "url": "/de",
      "elasticsearch": {
        "host": "/api/catalog",
        "index": "vue_storefront_catalog_de"
      },
    }
  }
}

API configuration of ElasticSearch

API configuration file local.json:

"elasticsearch": {
  "host": "localhost",
  "port": 9200,
  "index": "vue_storefront_catalog",
  "indices": [
    "vue_storefront_catalog"
  ],
  "apiVersion": "5.6"
}

In a similar way the API configuration needs to be extended as well. First of all, the ElasticSearch host and port need to be defined, plus a default index. The same default index needs to be added to the indices as well.

The indices work as a whitelist. The ElasticSearch instance might contain more than one index, including indices not related to Vue Storefront. The API will only forward requests from the PWA to the indices configured. Multiple ElasticSearch indices are needed whey working with multiple Magento Store Views.

The API version 5.6 works for both ElasticSearch 5 and 6. Use 7.0 when working with ElasticSearch 7. The usage of ElasticSearch 7 is actually dealt with in a different lesson.

Summary

  • Your ElasticSearch host, port and indices need to be configured
  • In the PWA, this goes in the following paths
    • elasticsearch
    • storeViews.LANGUAGE.elasticsearch
  • In the API, this only goes in the following path
    • elasticsearch
# Practical exercise By now, the PWA, the API and ElasticSearch should all be running. Following from the coursematerial, reconfigure the PWA configuration and the API configuration so that you're no longer using the Vue Storefront public demo, but your own local stack.

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo