Howdy, I'm trying to finish a workflow that uses Github Actions to plonk the Payload app and its dependencies all Dockerized onto an Ubuntu box elsewhere. The last thing I seem to be struggling with is making the serverURL dynamic, as it's configured in the
payload.config.ts file that is invoked at build-time indirectly by the scripts in the
npx sets things up, the package scripts call eachother. I'm not sure how best to get an env var from a
.env file in there. I've tried a few things that didn't quite work (requiring the
dotenv package inside of
payload.config.ts gave me an error as it used webpack's mock dotenv file). I'm sure there's a multitude of ways, but I wondered if, given you folks wrote the
payload build and webpack config stuff, you had a recommendation?
Thanks in advance, could save me more hours of headaches!
Hey @joshhills —
Take a look at this package:
It's not quite done yet as of this writing (will be coming out later this week) and it's meant to showcase how Payload can be combined directly with a custom NextJS server which is likely different than your use case, but it shows an example for how you can use an environment variable as your
There are two things to note here:
dotenvin your Payload config! This will make sure that server-side code has access to your environment variables. But, it won't have any effect in the browser as there is no
processin the browser. As you mentioned, we mock
dotenvfor the browser bundle.
serverURLenvironment variable is prefixed with
PAYLOAD_PUBLIC_. This tells Payload that its value should be whitetlisted and made available to the Payload browser code. By prefixing
PAYLOAD_PUBLIC_, your environment variables will be automatically made available to the browser bundled code. You can use this shortcut or you can use Webpack's
DefinePluginto automatically provide your env variables to your bundled admin panel.
Does this give you what you need?
I'll give it a go, cheers!
As I understand, you need to run a
build to create the
dist folder and then a
serve to serve from said folder? But the
serve script also uses the Payload config file.
It worked! Looks like the
PAYLOAD_PUBLIC_ prefix was the magic I needed, thanks
Awesome! Thank you for asking questions here. We hope that over time, Payload's Discussions will become a wealth of knowledge that amasses questions + answers exactly like this. 👍
note, that this only works, if you access
process.env.<YOUR_VAR_NAME> in your payload config file, we had a seperate lib script which would access all env vars and throw an error if the var would not exist - so importing an external script which then accesses
process.env did not work for us (email@example.com)