Reverse Proxying to Pages Sites

Pages
1

For any Pages implementers that are reverse proxying, we will soon be releasing a new version of Pages (npm package) that should be used to ensure assets resolve correct:

Summary of changes, in addition to the HH RP Guide, the guidance will be to:

I will update this post once rc.3 is ready, which should be ready at some point within 1-2 weeks.

There are several steps required in order to upgrade from a beta version of Pages to 1.0.0-* - as such, please be sure to budget some time to test. We will be providing a upgrade script that can be used to help facilitate this.

4 Likes
2

Thanks Luc, this will be really helpful for us.

3

Both Pages 1.0.0-rc.4 and Sites Components 1.0.0.-rc.4 were released last night. As such, you can now get started taking advantage of the new reverse proxy guidance.

First and foremost, you will need to upgrade your current site to work with the non-beta version of Pages. There are a few breaking changes from beta to non-beta, so we have created this update script to help temporarily. This will soon be a native CLI command, but for now you may use this repo (or perform these steps manually):

  • Clone this repository (pages-updater) to your computer.
    • cd into the repo and run:
    • node pages-updater.js [PATH TO YOUR PAGES REPO] (refer to the readme)
    • This will perform the following steps programmatically:
      • Install @yext/pages@latest, @yext/sites-components@latest, @vitejs/plugin-react@4.0.4, and vite@4.4.9
      • replace any imports you have from @yext/pages/components to @yext/sites-components; we have moved all components (e.g. Image) to a different npm package. This will have zero impact to end users or props interfaces.
      • Delete all existing package.json scripts, and add the following scripts instead (if you have any scripts you’d like to preserve outside of this set, please add them back in manually)
        "dev": "pages dev",
  "prod": "pages prod",
  "build:local": "pages build"
    • If for whatever reason this script does not work for you, you will need to perform these steps manually (however, we will soon offer a CLI command that takes care of this upgrade for you automatically)
  • From there, you can develop locally as usual, by running npm run dev
    • IMPORTANT CAVEATS! PLEASE READ:
      • The first time you run this command, you will be prompted to provide a Yext account ID and select your Yext account universe (production vs. sandbox). This information will be written to a .yextrc file in your directory, so that you no longer need to re-run yext init [accountId] during local development!
      • If you are using @yext/search-headless-react or @yext/search-ui-react, you may need to add the following to your vite.config.js file:
      ssr: {
   noExternal: ["@yext/search-headless-react", "@yext/search-ui-react"]
},

Example Website and Setup

Here is an example website, and the recommended setup:

Please reach out to your account team or to the Yext Product Managers if you run into issues. We will continue to release updates to the Pages 1.0.0-rc versions to make this easier, so stay tuned for updates.

1 Like
4

Its working for me thanks for fixing same.

5

Please refer to our updated guide, moving forward: Reverse Proxy | Hitchhikers