When we build and deploy Payload and the environment is set to 'staging' the webpack bundler runs on build and then again on server start, which is actually where a live preview variable is getting injected. (In our case, the env is called PAYLOAD_PUBLIC_WEBSITE_URL)

When the environment is set to 'production' the webpack bundler fails to run on server start, which leaves our production deployment missing that env value and live preview does not work.

To Reproduce

Payload version 2.18.3 install with Live Preview enabled.

Pages config file snippet:

livePreview: {
      url: ({ data }) =>
        `${process.env.PAYLOAD_PUBLIC_WEBSITE_URL}${
          data.slug !== 'home' ? `/${data.slug}` : ''
        }`,
    },

Payload Version

2.18.3

Adapters and Plugins

nestedDocs, redirects, seo, cloudStorage, payloadCloud, FormBuilder, mongoose adapter for Db

Selected Answer
joebu239 months ago
After discussion with someone who knows more than me, we are going to tweak our code and use something like dotenv-webpack to remedy this.
jmikrut
9 months ago
Hey @joebu23 — this is as designed. Basically, Webpack will run in dev mode whenever process.env.NODE_ENV !== 'production'.

And Payload will build using Webpack with the payload:build command.

Lots of frameworks detect only the variable NODE_ENV === 'production' to run in production mode, including things like Next.js and Remix - so by setting your NODE_ENV to 'staging', you are telling Payload that you are indeed not running in production, so it should start Webpack in the default mode (dev).

I imagine you need a way to detect different environments, which is totally understandable - but maybe you can use a different environment variable name to specify your own environment-specific differences?

What are you looking to accomplish with process.env.NODE_ENV = 'staging'?

I can maybe give some more direction here accordingly. But on v3, you'll have the same problems, because Next.js also detects production only.

Does this all make sense?
2 replies
joebu239 months ago
The issue we are running into that led to the discovery was deploying preview to our site.

In staging (when the NODE_ENV is 'staging') the ENV value 'PAYLOAD_PUBLIC_WEBSITE_URL' gets injected properly into the config so we can use preview.

In production, that value is not getting injected and we cannot use live preview.

I'm not sure if we are building wrong, deploying wrong or what.

The frontend is deployed on AWS via Lambdas/Cloudfront. The Payload instance is deployed to AppRunner.
joebu239 months ago
After discussion with someone who knows more than me, we are going to tweak our code and use something like dotenv-webpack to remedy this.