Best way to achieve a dynamic serverURL using environment variables?

[joshhills]

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!

[joshhills]

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.

[jmikrut]

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:

1. You can use 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.
2. You'll notice how in the example repo, our 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?

[joshhills]

I'll give it a go, cheers!

[joshhills]

It worked! Looks like the PAYLOAD_PUBLIC_ prefix was the magic I needed, thanks

[jmikrut]

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. 👍

[joshhills]

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)!..

[zaunermax]

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)