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.

[amyboose]

There is a problem.

weatherapi.GetEndpoint("http")

This returns target endpoint. But I can't get external endpoint. I want to get something like http://host.docker.internal:5333.
Now I solve the problem using constructor:

.WithEnvironment(context =>
{
    // frontend.GetEndpoint("http")
    string address = $"http://host.docker.internal:{frontend.GetEndpoint("http").Port
        .ToString(CultureInfo.InvariantCulture)}";
    context.EnvironmentVariables["FRONTEND_UKEP_ENDPOINT"] = address;
});

But it looks ugly. And I need reference to stable endpoint which will work even when I stop Aspire from VS.

WithExternalHttpEndpoints doesn't work too:

var frontend = builder
    .AddUkepFrontend("cm-frontend-ukep", port: 3555)
    .WithExternalHttpEndpoints()
    .WithLifetime(ContainerLifetime.Persistent);

[paulomorgado]

You want that to access from one container to another on Windows, right?

Have you tried something like this?

.WithEnvironment("FRONTEND_UKEP_ENDPOINT", $"{weatherapi.GetEndpoint("http")}")

[davidfowl]

The endpoint resolved will be different depending on the target resource type.

If you pass the endpoint of a container to another container then it’ll use the container network. If you pass a project of executable end point to a container then it’ll resolve host.docker.internal (the host endpoint). We don’t have a way to explicitly ask for the host endpoint.

[amyboose]

The endpoint resolved will be different depending on the target resource type.

If you pass the endpoint of a container to another container then it’ll use the container network. If you pass a project of executable end point to a container then it’ll resolve host.docker.internal (the host endpoint). We don’t have a way to explicitly ask for the host endpoint.

Yes. Using Aspire I get host endpoint (host.docker.internal) for my api project. I have frontend as a compiled image. And my frontend's container get only internal network's endpoint mapping using Aspire. And when I stop Aspire project, then the rest stops working.
I think that it can be useful to have a method to get and set the host's endpoint from existing container, not from proxy or internal container network.

[paulomorgado]

You can declare a container with persistent lifetime with:

container.WithLifetime(ContainerLifetime.Persistent)