Magento 2 - Vue Storefront PWA Integration: How to create a new VSBridge indexer job and Elastic Index for your custom module

For this tutorial we will consider an example of a custom module called Vendor_ModuleName . You need to have the module divante/magento2-vsbridge-indexer installed and configured in your project, in order for it to work with your Vue StoreFront PWA website. You can do this with below command:

composer require -vvv divante/magento2-vsbridge-indexer

view raw composer-command.txt hosted with ❤ by GitHub

Once you have the module installed and configured correctly, create below files to generate a new VSBridge indexer and Elastic Index for your own module: Vendor_ModuleName\etc\indexer.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<!--
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	-->
	<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Indexer/etc/indexer.xsd">
	<indexer id="vsbridge_my_custom_indexer" view_id="vsbridge_my_custom_indexer"
	class="Vendor\ModuleName\Model\Indexer\CustomIndexer">
	<title translate="true">My Custom Indexer</title>
	<description translate="true">Create new indexer and elastic index for custom module</description>
	</indexer>
	</config>

view raw indexer.xml hosted with ❤ by GitHub

Vendor_ModuleName\etc\mview.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<!--
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	-->
	<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Mview/etc/mview.xsd">
	<view id="vsbridge_my_custom_indexer" class="Vendor\ModuleName\Model\Indexer\CustomIndexer" group="indexer">
	<subscriptions>
	<table name="my_custom_module_table" entity_column="entity_id"/>
	</subscriptions>
	</view>
	</config>

view raw mview.xml hosted with ❤ by GitHub

Vendor_ModuleName\etc\vsbridge_indices.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<!--
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	-->
	<indices xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:noNamespaceSchemaLocation="urn:magento:module:Divante_VsbridgeIndexerCore:etc/vsbridge_indices.xsd">
	<index identifier="vue_storefront_catalog">
	<type name="my_custom_indexer" mapping="Vendor\ModuleName\Model\Indexer\Mapping\CustomIndexer" />
	</index>
	</indices>

view raw vsbridge_indices.xml hosted with ❤ by GitHub

Vendor\ModuleName\Model\Indexer\CustomIndexer.php

	<?php
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	namespace Vendor\ModuleName\Model\Indexer;
	/**
	* Class CustomIndexer
	*/
	class CustomIndexer implements \Magento\Framework\Indexer\ActionInterface, \Magento\Framework\Mview\ActionInterface
	{
	/**
	* @var \Divante\VsbridgeIndexerCore\Indexer\GenericIndexerHandler
	*/
	protected $indexHandler;
	/**
	* @var \Vendor\ModuleName\Model\Indexer\Action\CustomIndexer
	*/
	protected $customIndexerAction;
	/**
	* @var \Divante\VsbridgeIndexerCore\Indexer\StoreManager
	*/
	protected $storeManager;
	/**
	* Custom Indexer constructor.
	*
	* @param \Divante\VsbridgeIndexerCore\Indexer\GenericIndexerHandler $indexerHandler
	* @param \Divante\VsbridgeIndexerCore\Indexer\StoreManager $storeManager
	* @param \Vendor\ModuleName\Model\Indexer\Action\CustomIndexer $action
	*/
	public function __construct(
	\Divante\VsbridgeIndexerCore\Indexer\GenericIndexerHandler $indexerHandler,
	\Divante\VsbridgeIndexerCore\Indexer\StoreManager $storeManager,
	\Vendor\ModuleName\Model\Indexer\Action\CustomIndexer $action
	) {
	$this->indexHandler = $indexerHandler;
	$this->storeManager = $storeManager;
	$this->customIndexerAction = $action;
	}
	/**
	* @inheritdoc
	*/
	public function execute($ids)
	{
	$stores = $this->storeManager->getStores();
	foreach ($stores as $store) {
	$this->indexHandler->saveIndex($this->customIndexerAction->rebuild($ids), $store);
	$this->indexHandler->cleanUpByTransactionKey($store, $ids);
	}
	}
	/**
	* @inheritdoc
	*/
	public function executeFull()
	{
	$stores = $this->storeManager->getStores();
	foreach ($stores as $store) {
	$this->indexHandler->saveIndex($this->customIndexerAction->rebuild(), $store);
	$this->indexHandler->cleanUpByTransactionKey($store);
	}
	}
	/**
	* @inheritdoc
	*/
	public function executeList(array $ids)
	{
	$this->execute($ids);
	}
	/**
	* @inheritdoc
	*/
	public function executeRow($id)
	{
	$this->execute([$id]);
	}
	}

view raw CustomIndexer.php hosted with ❤ by GitHub

Vendor\ModuleName\Model\Indexer\Mapping\CustomIndexer.php

	<?php
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	namespace Vendor\ModuleName\Model\Indexer\Mapping;
	use Divante\VsbridgeIndexerCore\Api\Mapping\FieldInterface;
	use Magento\Framework\Event\ManagerInterface as EventManager;
	/**
	* Class CustomIndexer
	*/
	class CustomIndexer implements \Divante\VsbridgeIndexerCore\Api\MappingInterface
	{
	/**
	* @var EventManager
	*/
	private $eventManager;
	/**
	* CustomIndexer constructor.
	*
	* @param EventManager $eventManager
	*/
	public function __construct(EventManager $eventManager)
	{
	$this->eventManager = $eventManager;
	}
	/**
	* @inheritdoc
	*/
	public function getMappingProperties()
	{
	$properties = [
	'entity_id' => ['type' => FieldInterface::TYPE_LONG],
	/**
	* TODO: ADD OTHER COLUMNS OF YOUR TABLE HERE FOR THEM TO APPEAR IN ELASTIC INDEX
	*/
	];
	$mappingObject = new \Magento\Framework\DataObject();
	$mappingObject->setData('properties', $properties);
	$this->eventManager->dispatch(
	'elasticsearch_my_custom_indexer_properties',
	['mapping' => $mappingObject]
	);
	return $mappingObject->getData();
	}
	}

view raw CustomIndexer.php hosted with ❤ by GitHub

Vendor\ModuleName\etc\di.xml

	<?xml version="1.0"?>
	<!--
	/**
	* @author Reena Parekh <reena1.parekh@gmail.com>
	*/
	-->
	<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	<virtualType name="Vendor\ModuleName\Indexer\CustomIndexerHandlerVirtual" type="Divante\VsbridgeIndexerCore\Indexer\GenericIndexerHandler">
	<arguments>
	<argument name="indexIdentifier" xsi:type="string">vue_storefront_catalog</argument>
	<argument name="typeName" xsi:type="string">my_custom_indexer</argument>
	</arguments>
	</virtualType>
	<type name="Vendor\ModuleName\Model\Indexer\CustomIndexer">
	<arguments>
	<argument name="indexerHandler" xsi:type="object">Vendor\ModuleName\Indexer\CustomIndexerHandlerVirtual</argument>
	</arguments>
	</type>
	</config>

view raw di.xml hosted with ❤ by GitHub

Now, open console and run below command:

rm -rf var/cache var/page_cache generated/ pub/static/ var/di var/view_preprocessed && php bin/magento setup:upgrade && php bin/magento setup:di:compile && php bin/magento setup:static-content:deploy -f

view raw gistfile1.txt hosted with ❤ by GitHub

You will now see following:

• A new indexer job for your module in Magento admin panel > System > Tools > Index Management
• A new index in elastic
• You can refresh your indexer with

  php bin/magento indexer:reindex vsbridge_my_custom_indexer