Env variables for custom domains, onrender, and preview environments

1

I have a monorepo connected to a blueprint with previewsEnabled: true
In the monorepo I have a backend (nodejs) and a static frontend (vuejs/vite).

My services are running on https://fri-api.onrender.com and https://fri-admin.onrender.com

I also intend to have custom domains https://admin.fri.is and https://api.fri.is

I want to set the env variable VITE_FRI_API_URL so that:

I have tried various implentation of previewValue and fromService (using the host from the node api) without luck.

Am I over complicating things? Can this be solved in an easier way?

Can you point me in the right direction?

Best regards
Bergur

2

The example you want to find in our blueprint doc looks like this:

       - key: MINIO_ROOT_PASSWORD fromService: type: pserv name: minio envVarKey: MINIO_ROOT_PASSWORD

so in your case, you’d be getting the RENDER_EXTERNAL_URL (as documented at https://render.com/docs/environment-variables#all-services) and setting it as the key VITE_FRI_API_URL. That would link the preview environments together when they are created.

admin.fri.is and api.fri.is is a little bit trickier. As these don’t change, you might have to set these as environment variables on your application and use these, but then in your code detect the var IS_PULL_REQUEST and if that’s set use the value you’ve set in VITE_FRI_API_URL

John B

3

Hey @John_B and thanks for your help.

Very nice idea to pull the env variable from the api-service. That would solve the fri-api vs fri-api-pr-31

But, I don’t completely follow on the IS_PULL_REQUEST solution. Can I access those variables in a static web? Could eloborate a little?

Thanks.

4

I presumed that was what you were trying to do, to link backend (nodejs) and a static frontend (vuejs/vite). Certainly, React is able to use environment variables prefixed with REACT_, perhaps VITE has something similar (https://vitejs.dev/guide/env-and-mode.html)

So in your build command you can use a script, and have it do something like:

if ["$IS_PULL_REQUEST" = 'false']then export VITE_FRI_API_URL = 'api.fri.is'fi<your build commands here>

so you would still use the blueprint code to set VITE_FRI_API_URL for all environments, for your admin.fri.is it would be set to the onrender.com address, but then because IS_PULL_REQUEST would be false, it would be set it to api.fri.is

John B

1 Like
5

Hey @John_B and thanks again.

Yes, Vite has the VITE prefix, but I wasn’t sure how I could read the IS_PULL_REQUEST variable. Because I can’t do that in the client, but in a build script. That makes sens. Thanks.

But just so that I understand correctly. Lets say I set the VITE_FRI_API_URL=api.fri.is if its a pull request, that doesn’t solve if I browse to https://fri-admin.onrender.com - in that case it would talk to fri.api.is and not fri-api.onrender.com, right?

So I would get
a) admin.fri.is => api.fri.is (not a pull request so use custom domain names)
b) fri-admin-pr-31.onrender.com => fri-api-pr-31.onrender.com (pull request, so use RENDER_EXTERNAL_UR)

but

c) fri-admin.onrender.com => api.fri.is (not pull request, use custom domain names)

It’s not a dealbreaker, just making sure I understand your solution.

6

If it’s a pull request, assuming you’ve done the render.yaml as I’ve previously suggested then the API_URL would be the external address of the API.

If it’s NOT a pull request then the script would export it as api.fri.is.

It’s not at all obvious where these customer domains come into this so it’s really hard to make definitive suggestions, rather I’d suggest to experiment and see what happens,

Regards,

John B

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.