Add possibility to prefix EnvVar Names

[dersia]

we are using Vite to run our react frontends. adding those with AddNpmApp works well, but the problem is, that the environment variables are not available to the frontend.

as per Vite Documentation environment variables are only available in vite, if the name begins with VITE_.

so I suggest to add a WithEnvironmentPrefix(string prefix) method to set the prefix for all the exposed environment variables like service URLs, Otlp endpoints etc.

[davidfowl]

This feels a little special. I don't think we would want to do this for all environment variables. It would need to be controlled somehow.

[dersia]

another possibility would be to add multiple methods like so:

WithEnvironmentPrefixForService(string service Name, string prefix);
WithEnvironmentPrefixForOtlp(string prefix);

and others if needed.

I don't like the For* in the name and hope for better suggestions

[davidfowl]

Do you have a running sample today that we can use to validate the suggestion?

cc @IEvangelist as he has built samples using various front end frameworks.

[dersia]

Sorry it took me a few days. I have created a sample project here: https://github.com/dersia/AspireWithViteSample

[dersia]

I would be happy to contribute this change, if chosen to be done.

[IEvangelist]

The Vue example frontend is using Vite, see how here:

https://github.com/dotnet/aspire-samples/blob/main/samples/AspireWithJavaScript/AspireJavaScript.Vue/src/components/TheWelcome.vue#L21

It's just mapping the VITE_WEATHER_API from the env from Aspire. Article here.

[dersia]

sure, you could do that, but this means that you have to adjust the env file whenever a new nev is added, or the name of the service changed. there are multiple workarounds, but I think this should all be configured in aspire, I don't want to maintain multiple configurations with different concerns and have them duplicated.

---

From: David Pine @.> Sent: Saturday, February 17, 2024 2:47:37 PM To: dotnet/aspire @.> Cc: Sia Ghassemi @.>; Author @.> Subject: Re: [dotnet/aspire] Add possibility to prefix EnvVar Names (Issue #1898)

The Vue example frontend is using Vite, see how here:

https://github.com/dotnet/aspire-samples/blob/main/samples/AspireWithJavaScript/AspireJavaScript.Vue/src/components/TheWelcome.vue#L21

It's just mapping the VITE_WEATHER_API from the env from Aspire. Article herehttps://learn.microsoft.com/en-us/dotnet/aspire/get-started/build-aspire-apps-with-nodejs.

— Reply to this email directly, view it on GitHubhttps://github.com/dotnet/aspire/issues/1898#issuecomment-1950200954, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AALXPJUIWC455OS3RZC44BDYUCYHTAVCNFSM6AAAAABCNDU3C2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJQGIYDAOJVGQ. You are receiving this because you authored the thread.Message ID: @.***>

[davidfowl]

It would be possible to do this today by writing something like this:

public static class EnvExtensions
{
    public static IResourceBuilder<T> WithEnvironmentPrefix<T>(this IResourceBuilder<T> resourceBuilder, string prefix)
        where T : IResourceWithEnvironment
    {
        return resourceBuilder.WithEnvironment(context =>
        {
            var kvps = context.EnvironmentVariables.ToArray();

            // Adds a prefix to all environment variable names
            foreach (var p in kvps)
            {
                context.EnvironmentVariables[$"{prefix}{p.Key}"] = p.Value;
            }
        });
    }
}