Best way to consume pulumi output in my application code

Question

I was wondering what is the best way to consume the Pulumi deployment result in my application code. To give a concrete example, suppose my Pulumi stack generates the following url for an API Gateway endpoint

    [Output]
    public Output<string> APIEndpoint { get; set; }

This url is to be consumed by JavaScript code stored in a S3 bucket. The JavaScript is bundled by webpack during build and then stored into a S3 bucket also by Pulumi during deployment.

What is the best way to pass this url to the front end JavaScript bundle code?

Answer 1

After some research, I decided to go with this solution.

The deployment time url is injected into the window object like below

window['runtime-config'] = {
    apiUrl: 'http://localhost:8080/api'
}

And it is consumed by the frontend app

    var value = document.getElementById("my_input").value;
    const url = window["runtime-config"].apiUrl;

And the runtime-config.js file is overwritten at deployment time before being copied to the S3 bucket

    Func<string, Output<string>?> overwriteFiles = fileName => fileName == "runtime-config.js"? url.Apply(x=>$@"window['runtime-config'] = {{apiUrl: '${x}'}}") : null;  
    var objects = bucket.BucketName.Apply(bucketName => LoadFilesToS3(@"./public", bucketName, overwriteFiles));