Can't access environment variables

I can access my environment variables when running my react app locally on localhost:8000 (using netlify dev)

But once i deploy it to Netlify I cannot access them. https://gmwill934.netlify.app/

Is there something I am missing?

1 Like

Most likely! Have you seen this article on the topic?

1 Like

I just want to console.log() the environment variables like I can locally, to start, even though it’s not the right way, at least that way I can GRASP. I’ve been trying to figure this one out for HOURS.

2 Likes

This works locally. PLEASE help me get this working from Netlify hosted React project. That will get me a precious step closer to understanding. Thank you in advance.

// https://stackoverflow.com/questions/49579028/adding-an-env-file-to-react-project
import React from 'react'
import ReactDOM from 'react-dom'
import * as contentful from 'contentful'

import App from './components/App.js'

import './css/index.css'

require('dotenv').config()

const client = contentful.createClient({
  space: process.env.REACT_APP_SPACE_ID,
  accessToken: process.env.REACT_APP_ACCESS_TOKEN
    })

client.getEntries().then(entries => {
  entries.items.forEach(entry => {
    console.log(entry.fields.title, entry.fields.path, 
entry.fields.content.content[0].content[0].value)
  })
})

ReactDOM.render(<App />, document.getElementById('root'))
1 Like

Hey there, set your environment variables on Netlify.

To do so, login to your Netlify account and go to Sites > Your Site > Site Settings > Build & Deploy > Environment

Image Reference

Let me know how it goes.

I just figured it out, thank you so much. Onward.

1 Like

What did you end up doing? I still cannot get mine to work. I am using create-react-app.

Here’s a snippet of my code where I am able to successfully access the variable on my local environment:

const url = https://www.omdbapi.com/?s={searchValue}&apikey={process.env.REACT_APP_OMDB_API_KEY};

I have a .env file in my React project that is part of my .gitignore file:

REACT_APP_OMDB_API_KEY = 123456

This works fine locally. As soon as I push my code to GitHub, which integrates with Netlify, the API key is undefined. I tried adding the variable in the GUI but that didn’t work either:

I have seen other conversations about this issue but I haven’t exactly found a solution. It’s confusing and I don’t know why it has to be this complicated. This key is not public but it’s not exactly private either. It’s just an API for a movie database, so nobody’s gaining any real value from this. If I have to keep it exposed then I will. It’s only a portfolio project, although I’d prefer that people notice that I have security in mind…

1 Like

@jpmyers15 You have to set the environment variables in Netlify, in the site settings.

Thank you for your response, but I have done that already and included a screenshot in my original post. That is the part where I mentioned that I added a variable in the GUI.

Same issue here by using dotenv-webpack. Perfectly working with a local build and a hidden .env file.

Hi, @kissu. There is no application runtime for the deployed site (with the exceptions of Functions but you haven’t mentioned those). This is covered in the support guide listed above.

Did you read that support guide and try the solutions there? If so, what steps did you take and what were the results? Would you please send us a link to the site and explain what steps are required to see the error there?

Edit: change “node runtime” to “no application runtime”

I had this issue and it took quite a while to figure out. By default dotenv-webpack will not pick up properly set environment variables, only those defined .env files - you need to add the systemvars: true setting if you want dotenv-webpack to pick up normal linux environment variables (the kind that are set in netlify build and similar environments).

2 Likes

thank you for sharing!