I have made the environment variables in Azure for ml.amchine.org and main.ml-machine.org.

Environment variable name: APPINSIGHTS_CONNECT (so it can be accessed through process.env.APPINSIGHTS_CONNECT)

We can just test it on the main branch.

I realized the environment variable is, of course, not available client-side. So we will have to pass it on manually. How could we do that, @r59q ?

It is important to note that the connection string should be set in the running instance (e.g., an Azure webapp instance), not in the source code. So it will have to be fetched from process.env

process.env is a node function. Node is the runtime that is being run on the server (maybe)

here is an example of a server. It has access to the node runtime. If we must access the environment variables at runtime, then we could add an endpoint. I.e

// Serve the ml-machine website files
app.get('/', async (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

// REST endpoint to serve the appinsights endpoint
app.get('/appinsights', async (req, res) => {
    res.send(process.env.APPINSIGHTS_CONNECT)
});

app.listen(8080, () => {
    console.log("Server successfully running on port 8080");
});

Then from the code we could do something like

const insightsConnectionString = await fetch("/appinsights")

export const appInsights = new ApplicationInsights({
  config: {
    connectionString: insightsConnectionString,
  },
});

This is just an example for explanation. I actually have no idea what server(example is just an express server) is being used, nor what capabilities we have using azure. If for instance the files were served using NGINX, then we would have to write a location block in it's configuration

http {
    server {
        listen       80;
        location / {
            access_log off;
            return 200 '${APPINSIGHTS_CONNECT}';
            add_header Content-Type text/plain;
        }
    }
}

Another approach

I think we could use the environment variables at build time (much like the prepEnv.js script) to inject the environment variable at build-time

currently we use it like

node prepEnv.js branded

We could add the environment variable

node prepEnv.js branded $APPINSIGHTS_CONNECT

then in the script we create a file containing the connection string before the build process is started

const args = process.argv;
var ob = { insightsString : args[3] };

fs.writeFile("./insights.json", JSON.stringify(ob, null, 4), (err) => {
    if (err) {  console.error(err);  return; };
    console.log("File has been created");
});

finally we use it

const json = JSON.parse(
  await readFile(
    new URL('./insights.json', import.meta.url)
  )
);

export const appInsights = new ApplicationInsights({
  config: {
    connectionString: json.insightsString,
  },
});

However do note, that the environment variable has to be available to the agent that builds the application, i'm not sure if it's the github workflow runner or an azure instance?

It looks like we are exposing all environment variables client-side:

So, the environment variable may already be available to the client side.

Otherwise, we could write the environment variable in a .env file in the build process.

import * as fs from 'fs';

const envText = "APPINSIGHTS_CONNECT=" + process.env.APPINSIGHTS_CONNECT;

fs.writeFileSync(".env", envText);

This would make it available with our current settings, where we expose all environment variables.

It looks like we are exposing all environment variables client-side:

cctd-ml-machine/vite.config.ts

Line 26 in a90b7f1

EnvironmentPlugin('all'),

(which may be a dangerous practice)
So, the environment variable may already be available to the client side.

Otherwise, we could write the environment variable in a .env file in the build process.

import * as fs from 'fs';

const envText = "APPINSIGHTS_CONNECT=" + process.env.APPINSIGHTS_CONNECT;

fs.writeFileSync(".env", envText);

This would make it available with our current settings, where we expose all environment variables.

I realize that there may be issues with permissions to write in files.

Update: it does not work when deployed to Azure.

The environment variable is set:

The app is deployed (after the environment variable is set):
https://zealous-bay-0c5f48303-503.westeurope.2.azurestaticapps.net/

But is the environment variable is not available:

The next step is to print the key during the build process to check whether it is available.

Okay, the build process may happen on GitHub, not Azure. I will try with Github environments instead.
(https://docs.github.com/en/actions/deployment/targeting-different-environments/using-environments-for-deployment)

This could also improve the build process in general