Using environment variables inside template.html (index.html)

[goamn]

Hi, in our CRA app we were referencing environment variables inside template.html/index.html inside the script tags:

    <script>
      var hotjarId = process.env.PUBLIC_TEAMS_HOTJAR_ID;
      ...
    </script>

Is this still possible with Rsbuild? The above fails (process is undefined), and I also tried: '<%= PUBLIC_TEAMS_ENVIRONMENT %>' and '<%= process.env.PUBLIC_TEAMS_ENVIRONMENT %>'.

If this is not supported I guess the next step is to refactor this to Index.tsx

[9aoy]

@goamn In rsbuild, process.env cannot be available in html template by default, but you can define some parameters via html.templateParameters.

[goamn]

Thank you, this give me the answer :). I made it available by passing process.env it into html.templateParameters:

html: {
 template: './public/index.html',
 templateParameters: { processEnv: process.env },
},

Index.html:

    <script>
      var hotjarId = '<%= processEnv.PUBLIC_TEAMS_HOTJAR_ID %>';
      ...
    </script>

[9aoy]

process.env has a lot of keys, I think it's better to just pass the required keys into templateParameters.

html: {
 template: './public/index.html',
 templateParameters: { PUBLIC_TEAMS_HOTJAR_ID: process.env. PUBLIC_TEAMS_HOTJAR_ID },
},

    <script>
      var hotjarId = '<%=PUBLIC_TEAMS_HOTJAR_ID %>';
      ...
    </script>