Can't access environment variables

Support
1

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
2

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

1 Like
3

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
4

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
5

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

image
image1794Ă—1294 175 KB

Let me know how it goes.

6

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

1 Like
7

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:

image
image865Ă—538 27.2 KB

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
8

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

9

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.

10

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

11

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”

12

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).

7 Likes
13

thank you for sharing!

14

OMG, thank you!! I’ve spent days trying to troubleshoot this.

1 Like
15

Hello everyone! This worked. However, make sure that your API_URL matches your Netlify app URL if you are still encountering issues. Both URLs need to start with https:// and not http://. I encountered this issue and once it was fixed along with the solution from @kaytwo, everything worked out.

16

Thanks for sharing that extra feedback. (:

17

A working solution, thank you! :slight_smile:

Here is a StackOverflow for that as well: