How do I access bashrc environment variables in pug script. section

Question

I have a recaptcha site key stored in .bashrc and would like to use the environment variables in my pug view. The captcha section of my JS script is under a "script." section in the pug file.

I have attempted to use #{ } to interpolate the pug JS variable, and I have passed in the env variables through the 'route', but to no avail. The interpolation leaves an empty space in the captcha request.

// INDEX ROUTE
var express = require('express');
var router = express.Router();
const request = require('request');
var textUtil = require('../utils/sendText');

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Phoenix Flight Fire Supply', siteKey: process.env.PHOENIX_CAPTCHA_SITE_KEY }); // Passing in 'siteKey'
});


//INDEX PUG FILE
doctype html
html
  head
    title= title

    script(async, src='https://www.googletagmanager.com/gtag/js?id=UA-144999292-1')

    script.
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-144999292-1');


    meta(name='viewport' content='width=device-width, initial-scale=1')
    meta(name='theme-color' content='#B61919')
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/flickity.min.css' media='screen')
    link(rel='icon' sizes='192x192' href='images/phoenixfirelogosolid.png')
    script(src='javascripts/flickity.pkgd.min.js')
    script(src='javascripts/libs/inflate.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.0.3/babylon.max.js')
    script(src='https://d3js.org/d3.v3.min.js' language='JavaScript')
    script(src='javascripts/liquidFillGauge.js' language='JavaScript')
    script(src=`https://www.google.com/recaptcha/api.js?render=${siteKey}`)

    link(rel='stylesheet' href='https://use.typekit.net/gmu0vhj.css')
    link(rel='stylesheet' href='https://use.typekit.net/gmu0vhj.css')
    link(rel='stylesheet' href='https://use.typekit.net/gmu0vhj.css')
  body
    block content



... (BODY)



script.
  //RECAPTCA v3 LOAD
    grecaptcha.ready(function() {
      grecaptcha.execute(siteKey, {action: 'submitLead'}).then(function(token){
            // add token value to form
            document.getElementById('g-recaptcha-response').value = token;
        });
    });

While I am not getting any errors, recaptcha is not working properly because the siteKey is 'undefined'. Essentially, the pug preprocessing is not working correctly.

The preprocessing is not recognizing 'siteKey'. If I add #{}, the value is '' and recaptcha doesn't show.

grecaptcha.ready(function() {
  grecaptcha.execute(siteKey, {action: 'submitLead'}).then(function(token) {
        // add token value to form
        document.getElementById('g-recaptcha-response').value = token;
    });
});</script></body></html>

One last note: I check the .bashrc file, and the environment variable is spelled correctly. The key is surrounded by "" quotes, and I am running an Ubuntu 18.04 environment running Nginx as a proxy to Express.

Thank you for any help!

Answer 1

In your client-side JavaScript, I don't think you ever declared your siteKey variable.

Can you try something like this?

script(src=`https://www.google.com/recaptcha/api.js?render=#{siteKey}`)

...
script.
  const siteKey = #{siteKey}
  //RECAPTCA v3 LOAD
  grecaptcha.ready(function() {
    grecaptcha.execute(siteKey, ...

---

If that doesn't work, I'd first try to manually copy the key into the constant, and see if the application works.