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 package.json
.
The way 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:
https://github.com/payloadcms/nextjs-custom-server
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 serverURL
.
There are two things to note here:
dotenv
in 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 process
in the browser. As you mentioned, we mock dotenv
for the browser bundle.serverURL
environment 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 DefinePlugin
to 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. 👍
Happy to be the ignorant trailblazer in that regard ;-) If you/anyone is interested, I have my Payload project and Nginx setup public.
Next on to a standalone React app (I'm opting not to bundle my app with it because I'd like to use the data for multiple different clients)!..
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 (payload@0.6.10)
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.