Best way to achieve a dynamic serverURL using environment variables?

default discord avatar
joshhills
2 years ago
1 3

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!

  • discord user avatar
    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
  • default discord avatar
    joshhills
    2 years ago

    I'll give it a go, cheers!

  • default discord avatar
    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.

  • default discord avatar
    joshhills
    2 years ago

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

    3 replies
    discord user avatar
    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. 👍

    default discord avatar
    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)!..

    default discord avatar
    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)

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.