Best practice for developing against Answers Headless React and HH Sandbox

Search Best Practices - Search Front-End
1

Hi all, it’s great news Yext has recently released an Answers React package for developers to extend the use of Answers further through React dev projects. Very cool!

I just wanted to ask a quick question to sense check my approach to the config of Yext Answers React in relation to integrating with a Hitchhikers Sandbox account (for a STAGING version of Answers).

In order to achieve a successful integration, I’ve currently:

  • Change the Experience Key and API key in the AnswersHeadlessConfig.ts file to align to my Sandbox
  • Add the experienceVersion parameter (set to STAGING) in the AnswersHeadlessConfig.ts file
  • Change the Live API URL’s to liveapi-sandbox url in the constants.js file

I just wanted to sense check that is the correct procedure to test against the Staging version of Answers in a HH Sandbox, or if I’ve missed anything else?

All seems to work so far, but I just wanted to double check.

If anyone has any additional tips/tricks we should be aware of for this scenario, it would be great to hear from you.

Happy coding,

Thanks

Sam

2

Hi Sam,

So glad you’re liking it! Overall your steps look good to me, I might revise your third point,

  • Change the Live API URL’s to liveapi-sandbox url in the constants.js file

It’s generally not ideal to modify the Answers Core node module directly, since any modifications will be wiped on your next npm install.

You can instead update answerHeadlessConfig.ts to provide your endpoints (this is just a pass through to Answers Core):

export const answersHeadlessConfig: HeadlessProviderProps = {
  apiKey: 'REPLACE_ME_SANDOX_API_KEY',
  experienceKey: 'REPLACE_ME_SANDBOX_EXPERIENCE_KEY',
  locale: 'en',
  sessionTrackingEnabled: true,
  endpoints: {
    universalSearch: "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/query",
    verticalSearch: "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/vertical/query",
    questionSubmission: "https://liveapi-sandbox.yext.com/v2/accounts/me/createQuestion",
    universalAutocomplete: "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/autocomplete",
    verticalAutocomplete: "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/vertical/autocomplete",
    filterSearch: "https://liveapi-sandbox.yext.com/v2/accounts/me/answers/filtersearch"
  }
};

Let us know how this works for you!

Thanks,
Rose

3 Likes
3

Thanks Rose - yep makes total sense! I made the edits based on your suggestion and it renders fine. Thanks for the feedback, really appreciated!