injecting env variables through res.locals [4:40pm]

[frankcollins3]

attempting to do: all I'm attempting to do is to prepare env variables for client side. Doesn't have to be at build time

error: 1: webpack 🐇 🕳 () => webpack working locally. when deploying through EC2 amazon ubuntu server: GraphQL needs all these dependencies that belong to webpack (and some to npm i puppeteer) --legacy-peer-deps 2: onto parcel.js () => spent almost 2hrs getting setup. Finally got manifest.json() err removed but app shows with whitespace.

3: chatGPT mentioned res.locals (reminiscent of ejs + sequelize + psql) and sending app.locals through res.send() 🏳🏳🏳🏳🏳🏳🏳🏳🏳🏳🏳🏳🏳

proposed approach: sidenote: GraphQL, redux, puppeter, react-express instead of next (this project was for a react job interview) 0: my first proposed approach would not be to use GraphQLHttpExpress && React it would be to use Next.js Again, GQL is causing need for --legacy-peer-deps during npm installs of several different dependencies

1: chatGPT res.locals() idea which brings us to this issue:

created config.js file:

const config = {
    API_DEV: process.env.REACT_APP_API_DEV,
    API_PROD: process.env.REACT_APP_API_PROD,
    GOOGLE_ID: process.env.REACT_APP_GOOGLE_ID,
    NODE_ENV: process.env.REACT_APP_NODE_ENV,
    EUSER: process.env.REACT_APP_EUSER,
    WEATHER_KEY: process.env.REACT_APP_WEATHER_KEY
  };

  module.exports = config;

suggested by chatGPT:

app.use('/config.js', (req, res) => {
  res.set('Content-Type', 'application/javascript');
  res.send(`window._config = ${JSON.stringify(config)};`);
});

here is the error returned:

[frankcollins3]

my proposed approach includes: stepping down from best practices, taking out the config object as an exported module. declare object within file its exported from

this might not work but it's essentially removing any concerns created from separation (which is point of modularization)

[4:50pm]

[frankcollins3]

sending a simple string now:

app.use('/config.js', (req, res) => {
  res.set('Content-Type', 'application/javascript');
  res.send(`window._config = "hey";`);
});

confusion created by encountering this illustrates a possible path forward: ${process.env.NODE_ENV}:${process.env.REACT_APP_API_DEV}{REACT_API_PROD} development:"http//localhost:5000/awsEC2.com/hypotheticalWaterAppPath

send a concatenated string with the environment, and both urls separated by "***" which makes splitting them very easy. successfully done that throughout using this app and created GraphQL queries but retrieving those API from .env depends on an initial understanding of the absolute API path which needs a query.

this attempt separates the concerns that we are sending all of the ENV variables through res.send() 👍 now just attempt to send a basic hard coded string at this api endpoing created from 1st argument of app.use('/config)

then send concatenated string, and test with object after that

[4:57pm]

[frankcollins3]

res.send('hi') () => 👎 VM246:1 Uncaught (in promise) SyntaxError: Unexpected token 'h', "hi" is not valid JSON [4:58pm]

[frankcollins3]

const predata = await fetch("http://localhost:5000/config.js"); const data = await predata.json() [5:03pm] this is contributing to that as well