Easy (?) shared variables question

The environment contains the excellent Payload CMS template, attendant Mongo DB, and a Next.js front end. This works well when the env are set manually for each service, however the shared variables don't. What am I missing?

This works when set on each service, eg. not shared

NEXT_PUBLIC_SERVER_URL=https://cowcatcher.up.railway.app/
PAYLOAD_PUBLIC_SERVER_URL=https://caboose.up.railway.app/

The shared variables do not work

NEXT_PUBLIC_SERVER_URL=https://${{cowcatcher.RAILWAY_PUBLIC_DOMAIN}}
PAYLOAD_PUBLIC_SERVER_URL=https://${{caboose.RAILWAY_PUBLIC_DOMAIN}}

When shared on both front and back end services, the variables look like this

NEXT_PUBLIC_SERVER_URL=${{shared.NEXT_PUBLIC_SERVER_URL}}
PAYLOAD_PUBLIC_SERVER_URL=${{shared.PAYLOAD_PUBLIC_SERVER_URL}}

Project ID 520ae57c-db3e-4e21-ace6-db67bca65e2a

are those the correct service names? cowcatcher and caboose?

Yes 😂
https://cowcatcher.up.railway.app/
Caboose is stuck on loading screen right now. Might be cors.

can I see a screenshot of the project?

Yes, just a moment
To build on this issue, fetching with process.env.PAYLOAD_PUBLIC_SERVER_URL/api/posts is working locally as expected, but in production does not work. The static path https://caboose.up.railway.app/api/posts works in both. This may be an issue with Next.js not reading the service env for some reason? What's odd is that the env prints in TSX…
Screenshot of what precisely? Just the UI?

the whole project

and both those are built with nixpacks?

Yessir
[us-west1]
==============
Using Nixpacks
==============
https://cowcatcher.up.railway.app/blog

and this might be a silly question but how have you been able to confirm the variables aren't rendering, besides any issues from the next apps

        <p>
          process.env.PAYLOAD_PUBLIC_SERVER_URL is working:{' '}
          {process.env.PAYLOAD_PUBLIC_SERVER_URL}
        </p>

They render within the return for export default async function Blog() etc

what does that show?

It's not a trailing slash is it… hmmmmmmm

okay that looks good, now is that when you are using reference variables?

https://caboose.up.railway.app/ hmmmmmm

slow down here, it works

k

are you currently using reference variables?

  const res = await fetch(
    `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/api/posts?where[_status][equals]=published&depth=1&sort=-displayDate`,
    { next: { revalidate: 3600 } } // revalidate at most every hour
  )

I am using variables set within each service, not shared. Not sure about reference.

static variables
reference variables
shared variables

what type are you currently using

First ones, static
Should env paths like these include the trailing slash? That may be the culprit.

you want to use the reference variables, that way if you ever change a service name the variable update with the name change
and yes you typically would not include a trailing slash in these types of variables

Ok, to clairfy, ${{cowcatcher.RAILWAY_PUBLIC_DOMAIN}} will somehow automagically update the subdomain if the service name changes?
If so, I love Railway more every day.

yeah say you change the service name from "cowcatcher" to "horsecatcher"
your ${{cowcatcher.RAILWAY_PUBLIC_DOMAIN}} will automatically update to ${{horsecatcher.RAILWAY_PUBLIC_DOMAIN}}
and then if you then went and changed the public domain of the newly renamed service, all you'd need to do is redeploy the service that uses that variable and it will get rendered with the new domain

Killer. I like that. The shared will not render a trailing slash either? Presumably not.

if you put a trailing slash in the variable, there will be a trailing slash in the rendered variable

The shared variable in environment settings looks like this https://${{cowcatcher.RAILWAY_PUBLIC_DOMAIN}}
Once shared to a service, looks like this ${{shared.NEXT_PUBLIC_SERVER_URL}}

so I don't really see how shared variables come into play here?
just use reference variables

Oof, I am getting terms mixed up. Don't use shared in this case, regardless.
The idea is, in the near future, to clone this environment entirely, if possible.

also if you for example want to set a variable DOMAIN equal to the services own domain, you don't need to specify the service name since it's in the same namespace

Ahhhh, smart. Even better.
Required for cors anyway. Thank you!

so just use reference variables, that would clone across environments nicely

Thank you so much. "Caboose" is built on your template, thanks for that too!

and everything worked fine with that template?

Oh yes, even with all the extra stuff I have added. Works like a charm.
Note, process.env.PAYLOAD_PUBLIC_SERVER_URL is indeed printing a trailing slash. This seems wrong somehow.

Outputs

but does the variable you set have a trailing slash?

Yes, it did! Ok, sorry to be such a newb on this.

yep railway isn't going to touch anything outside of the ${{}}
so if there's a slash, it will be there after rendering

At some point, I'd like to learn how to craft whole environments as templates. Creating the linkages between the services and the volumes, for example. I haven't seen much detail in the documentation on that aspect.
Does nixpacks do that as well?

I'll send you an example project over that uses reference variables heavily across multiple services

guess railway doesnt want me to show you

Lol
Is this documented officially somewhere?

of course, and I should have linked the docs, but I just wanted to show you a real world example of reference variables, here's the docs though
https://docs.railway.app/develop/variables#reference-variables
i got railway to fix the issue so here is my public example project
https://railway.app/project/22902de5-b872-45ae-ba98-743585f6812a
have a look at all the service variables and how they reference each other!
this is also available as a template if youd like to look at that too
https://railway.app/template/CUZ7Dz

Darned if it won't show the variables. I can view the project but not the envs.

oh yeah, well you can see the variables in the template!
click to expand all variables