fix: use public versions of wp env vars (#253)

* use public versions of wp env vars

* update docs to use next_public envs

docs/preview-mode.md

@@ -33,9 +33,9 @@ _On WP Engine, these values aren't version controlled so you'll need to SFTP or
 
 2. Save `HEADLESS_API_SECRET` to Vercel as an environment variable, this is needed to authenticate API calls to WordPress to securely generate the logged in user's access token to activate preview mode. `HEADLESS_AUTH_SECRET` only lives inside WordPress to encrypt the access token, DO NOT copy/use this value outside of the setting in `wp-config.php`.
 
-3. Set `WORDPRESS_DOMAIN` to the root URL of the Wordpress instance (without /graphql)
+3. Set `NEXT_PUBLIC_WORDPRESS_DOMAIN` to the root URL of the Wordpress instance (without /graphql)
 
-4. Open `wordpress/wp-content/headless/functions.php` and edit the values for `$preview_domain` for production.
+4. To tie together your WordPress with your frontend, you need to set one variable in WordPress. Inside of WordPress, go to Appearance > Customization section in the theme. Under the "Headless" options heading, you can set the URL for your front-end homepage.
 
 5. Preview mode should now work. You can test by logging into Wordpress admin, creating a post (but don't publish!) and then click "Preview". If it all works, you should be able to view your post with a black bar on the top of the page indicating preview mode is enabled.
 
@@ -45,6 +45,6 @@ By default, we tend to configure preview branches to use production graphql, so
 
 Sometimes we want a staging WordPress where we can test changes there.
 
-Vercel supports per branch env variables, which allows us to setup a combination of WP backend and Next front-end for a specific branch. You'll want to set the `WORDPRESS_DOMAIN` and `WORDPRESS_API_URL` variables to point to your staging WordPress. The `HEADLESS_AUTH_SECRET` and `HEADLESS_API_SECRET` can be the same values on both production and staging.
+Vercel supports per branch env variables, which allows us to setup a combination of WP backend and Next front-end for a specific branch. We typically have preview instances point to production WP by default so that front-end only branches will work. When you need to point to a different WordPress endpoing, you can update the the `NEXT_PUBLIC_WORDPRESS_DOMAIN` and `NEXT_PUBLIC_WORDPRESS_API_URL` ENV variables. The `HEADLESS_AUTH_SECRET` and `HEADLESS_API_SECRET` can be the same values on both production and staging.
 
-To tie together your staging WordPress with your preview frontend, you need to set one variable in WordPress. Inside of WordPress, go to Appearance > Customization section in the theme. Under the "Headless" options heading, you can set the URL for your preview instance.
+Similar to your production setup, then update Appearance > Customization section in the theme to point to your preview instance homepage.

website/.env.sample

@@ -4,15 +4,15 @@
 # Configure the primary Wordpress backend domain
 # This is used as the default graphQL domain and for
 # other API calls involving preview mode
-#WORDPRESS_DOMAIN=localhost:8000
-WORDPRESS_DOMAIN=bubsnext.wpengine.com
+#NEXT_PUBLIC_WORDPRESS_DOMAIN=localhost:8000
+NEXT_PUBLIC_WORDPRESS_DOMAIN=bubsnext.wpengine.com
 
 # When GraphCDN is used, it'll be a different URL
 # than the Wordpress backend. Define it specifically here
 # Including the preceding HTTPS
-# WORDPRESS_API_URL=http://localhost:8000/graphql
-# WORDPRESS_API_URL=https://bubsnext.wpengine.com/graphql
-WORDPRESS_API_URL=https://bubsnext.graphcdn.app
+# NEXT_PUBLIC_WORDPRESS_API_URL=http://localhost:8000/graphql
+# NEXT_PUBLIC_WORDPRESS_API_URL=https://bubsnext.wpengine.com/graphql
+NEXT_PUBLIC_WORDPRESS_API_URL=https://bubsnext.graphcdn.app
 
 # When GraphCDN is used, cache purging can be enabled
 # whenever a Wordpress post is created or updated. Grab

website/next.config.js

@@ -2,6 +2,17 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
+// Logic mirrored from lib/constants.js
+const WORDPRESS_DOMAIN =
+  process.env.WORDPRESS_DOMAIN ||
+  process.env.NEXT_PUBLIC_WORDPRESS_DOMAIN;
+
+const WORDPRESS_URL = WORDPRESS_DOMAIN
+  ? WORDPRESS_DOMAIN.includes('localhost')
+    ? 'http://' + WORDPRESS_DOMAIN
+    : 'https://' + WORDPRESS_DOMAIN
+  : '';
+
 module.exports = withBundleAnalyzer({
   // Match Wordpress
   trailingSlash: true,
@@ -51,7 +62,7 @@ module.exports = withBundleAnalyzer({
       },
       {
         source: '/wp-content/uploads/:path*',
-        destination: `https://${process.env.WORDPRESS_DOMAIN}/wp-content/uploads/:path*`,
+        destination: `${WORDPRESS_URL}/wp-content/uploads/:path*`,
       },
     ];
   },

website/src/lib/constants.js

@@ -5,9 +5,13 @@
  *
  *  Required in config:
  *    * WORDPRESS_DOMAIN
+ *
+ *  Reccomended to use the public variations since some client-side requests need to be made
  */
 
-export const WORDPRESS_DOMAIN = process.env.WORDPRESS_DOMAIN;
+export const WORDPRESS_DOMAIN =
+  process.env.WORDPRESS_DOMAIN ||
+  process.env.NEXT_PUBLIC_WORDPRESS_DOMAIN;
 
 export const WORDPRESS_URL = WORDPRESS_DOMAIN
   ? WORDPRESS_DOMAIN.includes('localhost')
@@ -17,6 +21,7 @@ export const WORDPRESS_URL = WORDPRESS_DOMAIN
 
 export const WORDPRESS_API_URL =
   process.env.WORDPRESS_API_URL ||
+  process.env.NEXT_PUBLIC_WORDPRESS_API_URL ||
   (WORDPRESS_URL && WORDPRESS_URL + '/graphql') ||
   'https://bubsnext.wpengine.com/graphql';