Add Algolia enhancer

Before your front-end application can interpret the Algolia parameter values returned from Canvas, you must complete this one-time activation of Algolia enhancers into your app.

If you aren't familiar with the concept of enhancers, please check out this section about enhancers. To start with a pre-configured Next.js app already wired up to an Algolia enhancer, please use the following example:

git clone https://github.com/uniformdev/examples.git
cd /examples/examples/algolia-starter

Add enhancer to your app#

1. Add the following npm packages to your front-end application:

   npm install @uniformdev/canvas
   npm install @uniformdev/canvas-algolia
   

   CopyCopied!Wrap

2. In a text editor, open the file where you retrieve the composition definition from Uniform.

   You are looking for the code calls the async function getComposition. The code below assumes the object returned is set in a variable composition.

3. Add the following import statements:

   // general enhancer plumbing
   import { EnhancerBuilder, enhance } from '@uniformdev/canvas';
   
   // Algolia specific imports
   import { 
       createEnhancer,
       ALGOLIA_PARAMETER_TYPES,
       AlgoliaClient,
   } from '@uniformdev/canvas-algolia';
   

   CopyCopied!Wrap

4. Add the following code:

   const algoliaClient = new AlgoliaClient({
     applicationId: process.env.ALGOLIA_APPLICATION_ID,
     searchKey: process.env.ALGOLIA_API_KEY,
   });
   

   CopyCopied!Wrap

   About this step

   We recommend moving the Algolia credentials to environment variables rather than hard coding them in the front-end app.

5. Add the following code:

   const algoliaEnhancer = createEnhancer({ 
     clients: algoliaClient
   });
   

   CopyCopied!Wrap

6. Add the following code before your return your composition:

    await enhance({
      composition,
      enhancers: new EnhancerBuilder().parameterType(ALGOLIA_PARAMETER_TYPES, algoliaEnhancer),
      context: {},
    });
   

   CopyCopied!Wrap