I created a helpers.js under root/static folder
Inside this js file, I have method which needs access to the environmental/OS variables.
async function saveRegistration(pushSubscriptionObject) {
let url = "";
try {
url = `${process.env.GATSBY_FUNCTION_URL_BASE}${process.env.GATSBY_FUNCTION_UPDATE_SUBSCRIPTION}`;
console.log("using netlify config: ", url);
console.log("--------updateSub() url--------", url);
} catch (ex) {
console.log("saveReg() catch block:", JSON.stringify(ex));
return false;
}
}
Here is my .env and .env.development(yes, they are same, coz I’m testing what can make the env variables work):
GATSBY_FUNCTION_URL_BASE =http://localhost:34567/
GATSBY_FUNCTION_UPDATE_SUBSCRIPTION =updateSubscriptionNETLIFY_FUNCTION_URL_BASE =http://localhost:34567/
NETLIFY_FUNCTION_ADD_SUBSCRIPTION =addSubscription
NETLIFY_FUNCTION_UPDATE_SUBSCRIPTION =updateSubscription
here is my gatsby-config.js if it helps:
module.exports = {
siteMetadata: {
title: `Winston Fan's Blog`,
description:
".....",
},
plugins: [
"gatsby-plugin-react-helmet",
"gatsby-plugin-sass",
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/static/img`,
name: "uploads",
},
},
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/src/pages`,
name: "pages",
},
},
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/src/img`,
name: "images",
},
},
{
resolve: `gatsby-plugin-env-variables`,
options: {
allowList: ["NETLIFY_FUNCTION_URL_BASE", "NETLIFY_FUNCTION_ADD_SUBSCRIPTION", "NETLIFY_FUNCTION_UPDATE_SUBSCRIPTION"]
},
},
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-relative-images",
options: {
name: "uploads",
plugins: [
{
resolve: "gatsby-remark-images",
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 2048,
},
}
]
},
},
{
resolve: "gatsby-remark-copy-linked-files",
options: {
destinationDir: "static",
},
},
],
},
},
{
resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
options: {
develop: true, // Activates purging in npm run develop
purgeOnly: ["/all.sass"], // applies purging only on the bulma css file
},
}, // must be after other CSS plugins
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `AskWinston`,
short_name: `HeyWinston`,
start_url: `/`,
background_color: `#FFF`,
theme_color: `#FAE042`,
display: `standalone`,
icon: `src/img/wf-logo512.png`,
},
},
{
resolve: `gatsby-plugin-offline`,
options: {
appendScript: `src/sw.js`,
},
},
{
resolve: "gatsby-plugin-netlify-cms",
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
"gatsby-plugin-netlify" // make sure to keep it last in the array
],
};
However, no matter how I do it with environmental or OS variables, inside my helpers.js, I cannot get access to their values.
Please help