PAYLOAD_PUBLIC env var returning undefined

default discord avatar
arielarial
7 months ago
30

Hello!


I've made a small util for batch uploading images. In my local environment, it works fine. But in production (northflank),

fetch

is returning 404 because

process.env.PAYLOAD_PUBLIC_PAYLOAD_API

is

undefined

. I've double checked that the correct env var is in production, and I'm out of ideas of what can be the problem :/



Here's a snippet from the upload function:


  const uploadFile = async (file): Promise<string> => {
    const formData = new FormData();
    formData.append("file", file);

    const response = await fetch(
      `${process.env.PAYLOAD_PUBLIC_PAYLOAD_API}/media`,
      {
        method: "POST",
        body: formData,
      }
    );

    return `${file.path} – ${response.status} ${response.statusText}`;
  };
  • default discord avatar
    notchr
    7 months ago

    @arielarial What about other env vars?

  • default discord avatar
    arielarial
    7 months ago

    @notchr there's only one other paylod_public var:

    PAYLOAD_PUBLIC_PAYLOAD_URL

    , which I'm using in payload.config for

    serverURL

    prop

  • discord user avatar
    denolfe
    Payload Team
    7 months ago

    How are you verifying the env vars on that platform? Are the vars set during

    the build

    of the frontend bundle?

  • default discord avatar
    arielarial
    7 months ago

    @denolfe I've just checked on the container logs:


    2023-02-17T21:21:01.069936761Z stdout F [2023-02-17T21:21:01Z INFO ] Successfully fetched environment variables.
    2023-02-17T21:21:00.742615986Z stdout F [2023-02-17T21:21:00Z INFO ] Securely fetching environment variables...


    It is also in the Build logs:


    2023-02-17T21:15:58.44691136Z stdout F [2023-02-17T21:15:58Z INFO ] Successfully fetched environment variables.
    2023-02-17T21:15:58.409839571Z stdout F [2023-02-17T21:15:58Z INFO ] Securely fetching environment variables...


    This is a monorepo, and payload is in the

    cms

    folder. I had to change the Docker file a little bit to make it work. Could this be the problem?

  • default discord avatar
    thgh.
    7 months ago

    Env variables are only available on the serverside, you would have to configure webpack to replace them in the clientside build.

  • discord user avatar
    denolfe
    Payload Team
    7 months ago

    To clarify, Payload

    already does this substitution

    into the frontend bundle if the proper PAYLOAD_PUBLIC prefix is used.



    @arielarial Are you able to log the

    actual values

    to be certain they're being loaded?

  • default discord avatar
    arielarial
    7 months ago

    Thanks @thgh. and @denolfe !


    The values aren't being loaded :/ I made a local build to check if it was some issue in northflank, but logging a

    process.env.PAYLOAD_PUBLIC_XXXX

    env var is returning undefined in the frontend

  • default discord avatar
    notchr
    7 months ago

    @arielarial Not sure if this is helpful, but you can access your env vars in your webpack config



    And then you can use something like Define plugin



    new webpack.DefinePlugin({
        'process.env.foo': 'bar'
    })


    and then thats available on process.env in your app



    Webpack also accepts an env command



    webpack --config webpack.config.js --env.foo=bar

  • default discord avatar
    arielarial
    7 months ago

    Thanks, @notchr ! I'm trying to find out why Payload isn't exposing public env vars (as Elliot said). I think is better to make this work as intended. But I will try that approach if I can't figure this out, thanks!



    I was ready to dig in payload's source code, and found an issue about this solved by @jarrod_not_jared


    Adding this in the top of my payload config file solved the problem:



    import path from 'path';
    import dotenv from 'dotenv';
    
    dotenv.config({
      path: path.resolve(__dirname, '../.env'),
    });


    Source:

    https://github.com/payloadcms/payload/issues/1654#issuecomment-1355693467

    Thanks again @denolfe and @notchr 🙂

  • discord user avatar
    denolfe
    Payload Team
    7 months ago

    Okay, so you weren't pointing to where the actual .env file was before this, therefore no values were being loaded 👍

  • default discord avatar
    arielarial
    7 months ago

    @denolfe I guess that's it.


    So in production I should do a custom build script.


    But where should I store the fetched env vars, so Payload can expose them?



    // customAdminBuild.js
    const path = require('path');
    
    // Tell Payload where to find your Payload config - can do it either here, or in package.json script
    process.env.PAYLOAD_CONFIG_PATH = path.resolve(__dirname, 'src/payload.config.ts');
    
    const { build } = require('payload/dist/bin/build');
    
    const buildPayloadAdmin = async () => {
    // Fetch your environment variables here
    // And then run `build`
    
    build();
    }
    
    buildPayloadAdmin();
  • discord user avatar
    denolfe
    Payload Team
    7 months ago

    You shouldn't need this. The create-payload-app scaffolds this out for you. It does this:


    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build"


    I'm not sure what problem you're trying to solve



    Depending on if you have a CI process or not. The most straight-forward deploy would be to just have a separate .env file for prod



    and it's always in the spot your code loads from

  • default discord avatar
    arielarial
    7 months ago

    My initial problem was that using a PAYLOAD_PUBLIC env var in a collection hook was working in development but not in production.


    After setting

    dotenv.config

    , it worked for builds in my machine, as I do have an .env file to point to.



    But now I'm not sure how to solve this in production, as I'm deploying to Northflank via Github


    The .env files are not being commited, because they have credentials. I've set the environment variables in the admin panel configs for this project



    I thought that I would need to use the snippet above to fetch the PAYLOAD_PUBLIC env vars and set them somehow, in

    buildPayloadAdmin

    , before calling payload's build



    Hi @denolfe, did this make sense? I'm stuck on this now

  • default discord avatar
    notchr
    7 months ago

    @arielarial Github / Gitlab allow you to set enviornment variables through the control panel



    So that your project can securely reference them



    https://docs.github.com/en/actions/learn-github-actions/variables
  • default discord avatar
    arielarial
    7 months ago

    Didn't know about that! But still, this won't produce an .env file, which is what payload is expecting from me to point at. It looks like this works just like Northflank's environment variables, which are available at build, but that I can't make Payload expose to the frontend

  • discord user avatar
    denolfe
    Payload Team
    7 months ago

    Those env vars will need to be set during build time. Payload doesn't care

    how

    you go about reading in those env vars, that's more of a CI concern for you to solve.

  • discord user avatar
    jmikrut
    Payload Team
    7 months ago

    to add,

    the .env file is only one method of declaring .env variables

    - you don't need to use it at all

  • discord user avatar
    denolfe
    Payload Team
    7 months ago

    Northflank likely lets you set env vars another way in their interface

  • discord user avatar
    jmikrut
    Payload Team
    7 months ago

    typically platforms like Northflank + Vercel / + Netlify, etc. allow you to set env variables in their own CI



    ^^ yep



    AKA no need for

    .env

    in that point

  • default discord avatar
    arielarial
    7 months ago

    Thank you all for the responses! I am setting my env vars via Northflank's panel:



    The problem is: during build, I'm using this vars to build Payload without problems.


    But in Payload's admin interface I'm using a hook that needs payload api url. That is one of my env vars, that is not being set for the admin panel of payload.



    At this point I was asking myself if there's another easier way to get payload REST API URL from inside a hook? Is this exposed in any var?

    image.png
  • default discord avatar
    thgh.
    7 months ago

    Recently used this, based on how it's done in Payload internally:


    const { serverURL, routes: { api } } = useConfig()
    fetch(
      `${serverURL}${api}/${props.relationTo}`,
      { method: 'POST', body }
    ).then((r) => r.json())
  • default discord avatar
    arielarial
    7 months ago

    Thank you so much, @thgh. ! I'm gonna try this, but it seems to be exactly what I need

  • default discord avatar
    joekr
    6 months ago

    @arielarial Could you share your batch upload snippet?

  • default discord avatar
    mr.dumbledore
    6 months ago

    I've deploy my payload app to app engine I've specified PAYLOAD_PUBLIC_PAYLOAD_URL, PAYLOAD_PUBLIC_PAYLOAD_API, PAYLOAD_URL but the react app is still making request to

    http://localhost:3000/api/user/me

    . What should I do?

  • default discord avatar
    arielarial
    6 months ago

    sure @joekr ! I made a gist for it. Just note that this was more like a POC, and I never ended up using it in production. So there are quite a few adjustments and verifications left to do:


    https://gist.github.com/arieltonglet/0fcec02b2df3cd92a2969b95f4a525b6
  • default discord avatar
    mr.dumbledore
    6 months ago

    @arielarial any suggestions for me?

  • default discord avatar
    arielarial
    6 months ago

    hi @mr.dumbledore ! I was going to suggest that you make a new thread, but I see you already did that 🙂 I'm sorry but I don't know what could be your problem. I think it would help if you add a snippet of your payload.config to that thread

  • default discord avatar
    mr.dumbledore
    6 months ago

    I just did

  • default discord avatar
    allannnc
    2 months ago

    sorry to bump such an old thread but thank you @thgh.!

  • default discord avatar
    chaitealattayy
    2 months ago

    Yes thank you @thgh. helped a bunch!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.