Env variable prefixed with PAYLOAD_PUBLIC_ not working in production

[creative-andrew]

Describe the Bug

Similar issues have been reported in the past: #1654, payloadcms/plugin-cloud-storage#52 and I have followed the recommended instructions without success.

I have 2 env variables:

PAYLOAD_PUBLIC_FRONTEND_URL=http://localhost:3000
PAYLOAD_PUBLIC_PREVIEW_SECRET=<SECRET>

which I need to access in my formatPreviewURL.ts file

import { formatPagePath } from "@/utilities/formatPagePath";
import extractLocale from "@/utilities/extractLocale";

export const formatPreviewURL = ({
  collection,
  doc,
  locale,
}: {
  collection: string;
  doc: any;
  locale: string;
}): string => {
  return `${process.env.PAYLOAD_PUBLIC_FRONTEND_URL}/api/draft?slug=${extractLocale(
    locale,
  )}${formatPagePath(collection, doc)}&secret=${process.env.PAYLOAD_PUBLIC_PREVIEW_SECRET}`;
};

Everything works fine in development, but they output undefined on prod.

I am using/including dotenv in both my files: server.ts and payload.config.ts

File structure:

/utilities/formatPreviewURL.ts
/payload.config.ts
/server.ts
.env

server.ts

import express from "express";
import payload from "payload";
import path from "path";
import dotenv from "dotenv";

dotenv.config();
const app = express();
app.use("/assets", express.static(path.resolve(__dirname, "./assets")));
app.use("/frontend-assets", express.static(path.resolve("../frontend/public")));
// Redirect root to Admin panel
app.get("/", (_, res) => {
  res.redirect("/admin");
});

const start = async (): Promise<void> => {
  // Initialize Payload
  await payload.init({
    secret: process.env.PAYLOAD_SECRET,
    mongoURL: process.env.MONGODB_URI,
    express: app,
    onInit: () => {
      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
    },
  });

  // Add your own express routes here
  app.listen(process.env.PORT, async () => {
    payload.logger.info(`Server listening on port ${process.env.PORT}`);
  });
};

start();

payload-config.ts

dotenv.config({
  path: path.resolve(__dirname, "../.env"),
});

export default buildConfig({
  serverURL: process.env.PAYLOAD_PUBLIC_BASE_DNS,
  admin: {
    user: Users.slug,
    components: {
      graphics: {
        Icon: Logo,
        Logo,
      },
    },
    webpack: config => ({
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...(config.resolve.alias || {}),
          ...resolveTsconfigPathsToAlias({
            tsConfigPath: "tsconfig.json",
            webpackConfigBasePath: "./",
          }),
        },
      },
    }),
  },
  localization: {
    locales: ["de_DE", "en-GB", "fr-FR", "cs-CZ", "nl-NL"],
    defaultLocale: "de_DE",
    fallback: false,
  },
  rateLimit: {
    trustProxy: true,
    max: 4000,
  },
  collections: [Media, Pages, Posts, Users, Categories, Products, FeatureLabels, Team, Partners],
  globals: [Settings, Header, Footer],
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, "__generated__/schema.graphql"),
    disablePlaygroundInProduction: false,
  },
  typescript: {
    outputFile: path.resolve(__dirname, "__generated__/payload-types.ts"),
  },
  plugins,
});

Payload Version

1.11.7

[jmikrut]

Where do your files get built to in production? I've noticed that your project's payload.config.ts file is in the root folder, next to your .env file. But in your Payload config, you are telling dotenv to go up one level to find the .env in the parent folder.

When you build for production, I imagine you build to a ./dist folder or similar. Right? We suggest that your source files mirror your directory structure when you build, so that your .dotenv files are able to be loaded with the same relative path in dev vs. prod.

Example, by default, in development you should have:

./src/payload.config.ts
./src/server.ts
.env

Then in production:

./dist/payload.config.js
./dist/server.js
.env

So in both environments, you would tell dotenv to go up one level to find your .env file and it would work for both.

This is just a problem with how you are telling dotenv to load your environment variable, and this is not an issue with Payload. I will convert this to a discussion, but would be happy to continue to help!

[creative-andrew]

@jmikrut Thanks for your message.

The problem here is that I don't have any .env file in production. I have a docker container that has the process.env injected.

Interestingly all other env variables work (MONGODB_URI, PAYLOAD_SECRET, etc) which are used in the server.js file.

However when using the env var PAYLOAD_PUBLIC_FRONTEND_URL in formatPreviewURL.ts it doesn't work.

Even tho I expose it with PAYLOAD_PUBLIC_ is not getting read in the front end and shown as undefined. Maybe it has to do with how does the preview button work?

[adampilks]

Hey @creative-andrew did you ever find a solution here. Am in the exact same scenario.

[sacha-c]

I am also running into the same problem. I opened an issue here #4892

[guillaume-dussault]

@jmikrut any ideas? I'm also facing this issue. Moreover, the variables are defined on server side, I get the feeling that the values are baked-in on build and access on the container at runtime.

[creative-andrew]

I solved this issue by adding the .env file also on production.

[guillaume-dussault]

Thanks for the reply!

Are you able to get values on runtime or is it the values that were set at build? If you could share your collection index file, payload config, server and docker file it would help :)

[Raigato]

Tried to do the same by generating a .env file on image build but I still get the undefined value

[felixmokross]

I looked into this a bit. You don't necessarily need a .env file in deployed environments. The important bit is that the env variables are there when npm run build is executed, so upon deployment it needs to be available within the Dockerfile as a build argument:

FROM node:18.8-alpine as base

FROM base as builder

+ ARG PAYLOAD_PUBLIC_MY_VARIABLE

WORKDIR /home/node/app
COPY package*.json ./

COPY . .
RUN npm ci
RUN npm run build

…

This can then be passed to Docker Build like this: docker build --build-arg PAYLOAD_PUBLIC_MY_VARIABLE=value ..

As I'm hosting on Fly.io, I use:

flyctl deploy \
            …
+           --build-arg PAYLOAD_PUBLIC_MY_VARIABLE=value \

Now it makes all sense to me, but would be nice to have this better documented to make the distinction between "build argument" env variables and actual runtime env variables.

I generally don't use a .env file in my deployed environments, only use it for development and therefore have it in the .gitignore. So this approach made more sense to me.

[dmalament-wheelsup]

The issue with this approach is that you can't build one container and deploy it to multiple environments. You have to build a new container for each environment. Or did I miss something?

[aliADSP]

Yes this is exactly the problem @dmalament-wheelsup The solution is to build the app when container starts with runtime variables injected during build and run of the app. This is the same problem with nextjs apps too

[aliADSP]

something like yarn build && yarn start