Best way to achieve a dynamic serverURL using environment variables?

joshhills

2 years ago

1 3

• Selected Answer
  

  jmikrut

  Payload Team

  2 years ago

  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?

  1 reply
• 

  joshhills

  2 years ago

  I'll give it a go, cheers!

• 

  joshhills

  2 years ago

  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.

• 

  joshhills

  2 years ago

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

  3 replies
  

  jmikrut

  Payload Team

  2 years ago

  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

  2 years ago

  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

  2 years ago

  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)