Custom environment variable names through .WithReference()

[ADThomsen]

I used the AspireWithNode example to have my react app in my Aspire solution, and it works.

Now I would like to customize the name of the environment variable holding the URI of my apiservice and prefix it with VITE_ (or REACT_APP_ or whatever) to be able to read it from my JS app. Is the a way for me to do that? Alternatively, how can I get to the URI at application startup so I can create a custom environment variable?

I have found the code that generates the environment variable in ResourceBuilderExtensions.cs but I don't see an obvious way to hook into it.

[davidfowl]

You would use WithEnvironmnt, not with WithReference.

var weatherapi = builder.AddProject<Projects.AspireWithNode_AspNetCoreApi>("weatherapi");

builder.AddNpmApp("frontend", "../NodeFrontend", "watch")
    .WithEnviroment("VITE_SOMETHING", weatherapi.GetEndpoint("http"))
    .WithReference(cache)
    .WithServiceBinding(scheme: "http");

[ADThomsen]

Thanks. weatherapi.GetEndpoint("http") was the missing piece. I had seen the .GetEndpoint but hadn't figured out what the name should be. Issue solved :)

[rose-alex42]

var weatherapi = builder.AddProject<Projects.AspireWithNode_AspNetCoreApi>("weatherapi");

builder.AddNpmApp("frontend", "../NodeFrontend", "watch")
    .WithEnvironment("VITE_SOMETHING", weatherapi.GetEndpoint("http"))
    .WithReference(cache)
    .WithServiceBinding(scheme: "http");

Fixed that typo for all you copy-pastaz!

[hades200082]

@ADThomsen When I try to do this I get...

Unhandled exception. System.InvalidOperationException: The endpoint `https` is not allocated for the resource `qs-reborn-api`.
   at Aspire.Hosting.ApplicationModel.EndpointReference.get_AllocatedEndpoint() in /_/src/Aspire.Hosting/ApplicationModel/EndpointReference.cs:line 107
   at Aspire.Hosting.ApplicationModel.EndpointReference.get_Url() in /_/src/Aspire.Hosting/ApplicationModel/EndpointReference.cs:line 104

Is this because the API hasn't finished loading yet when the AddNpmApp is called?

[davidfowl]

Endpoints might not be allocated for 2 reasons:

1. The orchestrator hasn’t allocated the ports yet and you attempted to resolve the endpoint too early.
2. you don’t have an endpoint named https.

We’re going to improve the error message to make it clear which situation you are in.

[AlexanderBartoshZ]

@ADThomsen Dont use .url.
Thus, instead of resource.GetEndpoint("...").Url just use resource.GetEndpoint("...")
And if the default format has to be changed you can use:
ReferenceExpression.Create($"{primaryEndpoint.Property(EndpointProperty.Host)}:{primaryEndpoint.Property(EndpointProperty.Port)}")

[paulomorgado]

You would use WithEnvironmnt, not with WithReference.

var weatherapi = builder.AddProject<Projects.AspireWithNode_AspNetCoreApi>("weatherapi");

builder.AddNpmApp("frontend", "../NodeFrontend", "watch")
    .WithEnviroment("VITE_SOMETHING", weatherapi.GetEndpoint("http"))
    .WithReference(cache)
    .WithServiceBinding(scheme: "http");

Hi @davidfowl,

What if I want to set an environment variable to a more complex URI that contains the endpoint?

If weatherapi.GetEndpoint("http") resolves to http://localhost:5001/, how can I get http://localhost:5001/api/ out of it?

[davidfowl]

@paulomorgado Can you file an issue for this? I've had this PR sitting around forever #520

[plppp2001]

You would use WithEnvironmnt, not with WithReference.

var weatherapi = builder.AddProject<Projects.AspireWithNode_AspNetCoreApi>("weatherapi");

builder.AddNpmApp("frontend", "../NodeFrontend", "watch")
    .WithEnviroment("VITE_SOMETHING", weatherapi.GetEndpoint("http"))
    .WithReference(cache)
    .WithServiceBinding(scheme: "http");

Hi @davidfowl,

What if I want to set an environment variable to a more complex URI that contains the endpoint?

If weatherapi.GetEndpoint("http") resolves to http://localhost:5001/, how can I get http://localhost:5001/api/ out of it?

Is this coming from the AppConfig from the weatherapi project?
weatherapi.GetEndpoint("http")

[andrem0]

@davidfowl I'm trying to do a similar thing using Yarn, but the variables are not available to read inside my application code. Any clue why?
App is running with latest version of Next.js.

var resource = new YarnResource(jsonObject.Name, "yarn", workingDirectory);

return distributedApplicationBuilder
                .AddResource(resource)
                .WithEnvironment("HELLO", "WORLD")
                [...]

process.env["HELLO"] returns undefined inside frontend application.

[davidfowl]

I need more details to help. I don't know what your custom YarnResource does, nor do I know what nextjs expects as environment variables. Can you share all of the code?

[andrem0]

Sorry, it all went a little fast that day. Turns out the problem was the latest version of turborepo, where they now had restricted access to environment variables by default: https://turbo.build/repo/docs/crafting-your-repository/using-environment-variables#environment-modes

Switching to "Loose mode" or specifying the env variable in turbo.json (under "globalEnv") solved the issue.

So, all in all, unrelated issue.