0

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?

Xiaoguo Ge
  • 2,177
  • 20
  • 26
  • 1
    Set an environment variable for webpack? – Mikhail Shilkov Oct 06 '20 at 11:54
  • But, the webpack bundle is part of the build and the URL is not known until after the deployment. Also, depending on the environment, the url can be different in different environment. Now given it more thoughts, it looks to me that Pulumi needs to generate something in Javascript in the S3 bucket which contains the url that the webpack generated bundle can reference. I was wondering if this the best practice most people follow? – Xiaoguo Ge Oct 06 '20 at 22:41

1 Answers1

0

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));
Xiaoguo Ge
  • 2,177
  • 20
  • 26