PAYLOAD_PUBLIC env var returning undefined

arielarial2 years ago

30

  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}`;
  };

• 

  notchr2 years ago

  @736673642158620680

  What about other env vars?

• 

  arielarial2 years ago

  @1049775120559898725

  there's only one other paylod_public var:

  PAYLOAD_PUBLIC_PAYLOAD_URL

  , which I'm using in payload.config for

  serverURL

  prop

• 

  denolfe

  2 years ago

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

  the build

  of the frontend bundle?

• 

  arielarial2 years ago

  @967118574445547650

  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?

• 

  thgh.2 years ago

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

• 

  denolfe

  2 years ago

  To clarify, Payload

  already does this substitution

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

  
  
  @736673642158620680

  Are you able to log the

  actual values

  to be certain they're being loaded?

• 

  arielarial2 years ago

  Thanks

  @476523795251855360

  and

  @967118574445547650

  !

  
  

  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

• 

  notchr2 years ago

  @736673642158620680

  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

• 

  arielarial2 years ago

  Thanks,

  @1049775120559898725

  ! 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

  @281120856527077378

  
  

  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

  @967118574445547650

  and

  @1049775120559898725

  🙂

• 

  denolfe

  2 years ago

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

• 

  arielarial2 years ago

  @967118574445547650

  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();

• 

  denolfe

  2 years 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

• 

  arielarial2 years 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

  @967118574445547650

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

• 

  notchr2 years ago

  @736673642158620680

  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
• 

  arielarial2 years 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

• 

  denolfe

  2 years 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.

• 

  jmikrut

  2 years ago

  to add,

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

  - you don't need to use it at all

• 

  denolfe

  2 years ago

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

• 

  jmikrut

  2 years 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

• 

  arielarial2 years 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?
• 

  thgh.2 years 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())

• 

  arielarial2 years ago

  Thank you so much,

  @476523795251855360

  ! I'm gonna try this, but it seems to be exactly what I need

• 

  joekr2 years ago

  @736673642158620680

  Could you share your batch upload snippet?

• 

  mr.dumbledore2 years 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?

• 

  arielarial2 years ago

  sure

  @133983243291590657

  ! 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
• 

  mr.dumbledore2 years ago

  @736673642158620680

  any suggestions for me?

• 

  arielarial2 years ago

  hi

  @643912278244065292

  ! 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

• 

  mr.dumbledore2 years ago

  I just did

• 

  allannnc2 years ago

  sorry to bump such an old thread but thank you

  @476523795251855360

  !

• 

  chaitealattayylast year

  Yes thank you

  @476523795251855360

  helped a bunch!