# Can't access environment variables **URL:** \ **Category:** Support\ **Tags:** environment-vars\ **Created:** [August 6, 2020, 6:20pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314 "2020-08-06T18:20:14Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![gmwill934](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/gmwill934/32/14315_2.png) [@gmwill934](https://answers.netlify.com/u/gmwill934)\ **Post date:** [August 6, 2020, 6:20pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/1 "2020-08-06T18:20:15Z")
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? ---
**Author:** ![fool](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/fool/32/37_2.png) [@fool](https://answers.netlify.com/u/fool)\ **Post date:** [August 7, 2020, 12:53am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/2 "2020-08-07T00:53:20Z")
Most likely! Have you seen this article on the topic? > [@\[Support Guide\] Using environment variables on Netlify correctly](https://answers.netlify.com/t/support-guide-using-environment-variables-on-netlify-correctly/267): > > Last reviewed: August 2023 The preferred way to use environment variables in Netlify is to set them in our environment - be that in the Environment Variables settings UI (on the site’s “Build & Deploy settings” page), or [via netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration/). You’ll want to choose the right pattern to meet your needs. Setting variables in our UI may be considered a bit more secure, since only people with access to the Netlify admin UI for your site can see them, rather than “anyone who can clone your repo!”. Thes… ---
**Author:** ![MadHatter](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MadHatter](https://answers.netlify.com/u/MadHatter)\ **Post date:** [August 22, 2020, 1:45am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/3 "2020-08-22T01:45:04Z")
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. ---
**Author:** ![MadHatter](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MadHatter](https://answers.netlify.com/u/MadHatter)\ **Post date:** [August 22, 2020, 2:00am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/4 "2020-08-22T02:00:50Z")
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(, document.getElementById('root')) ``` ---
**Author:** ![gmwill934](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/gmwill934/32/14315_2.png) [@gmwill934](https://answers.netlify.com/u/gmwill934)\ **Post date:** [August 22, 2020, 2:17am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/5 "2020-08-22T02:17:01Z")
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](https://global.discourse-cdn.com/netlify/original/2X/4/49e098f55c342921e149bc028643cdbc667bbba1.png) Let me know how it goes. ---
**Author:** ![MadHatter](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MadHatter](https://answers.netlify.com/u/MadHatter)\ **Post date:** [August 22, 2020, 2:28am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/6 "2020-08-22T02:28:10Z")
I just figured it out, thank you so much. Onward. ---
**Author:** ![jpmyers15](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jpmyers15/32/21193_2.png) [@jpmyers15](https://answers.netlify.com/u/jpmyers15)\ **Post date:** [January 22, 2021, 2:56pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/7 "2021-01-22T14:56:51Z")
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}`;`](https://www.omdbapi.com/?s=%24%7BsearchValue%7D&apikey=%24%7Bprocess.env.REACT_APP_OMDB_API_KEY%7D%60;%60) 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](https://global.discourse-cdn.com/netlify/original/3X/6/d/6d655cd37c04655ff5ea2a9aabfb9c83cb8ce70b.png) 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… ---
**Author:** ![MadHatter](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MadHatter](https://answers.netlify.com/u/MadHatter)\ **Post date:** [January 22, 2021, 9:18pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/8 "2021-01-22T21:18:56Z")
@jpmyers15 You have to set the environment variables in Netlify, in the site settings. ---
**Author:** ![jpmyers15](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jpmyers15/32/21193_2.png) [@jpmyers15](https://answers.netlify.com/u/jpmyers15)\ **Post date:** [January 24, 2021, 2:15pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/9 "2021-01-24T14:15:10Z")
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. ---
**Author:** ![kissu](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/kissu/32/21286_2.png) [@kissu](https://answers.netlify.com/u/kissu)\ **Post date:** [January 25, 2021, 3:21pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/10 "2021-01-25T15:21:47Z")
Same issue here by using `dotenv-webpack`. Perfectly working with a local build and a hidden `.env` file. ---
**Author:** ![luke](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/luke/32/39_2.png) [@luke](https://answers.netlify.com/u/luke)\ **Post date:** [January 26, 2021, 8:39am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/11 "2021-01-26T08:39:01Z")
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](https://answers.netlify.com/t/support-guide-using-environment-variables-on-netlify-correctly/267). 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” ---
**Author:** ![kaytwo](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@kaytwo](https://answers.netlify.com/u/kaytwo)\ **Post date:** [March 9, 2021, 4:30am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/12 "2021-03-09T04:30:08Z")
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). ---
**Author:** ![perry](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/perry/32/16_2.png) [@perry](https://answers.netlify.com/u/perry)\ **Post date:** [March 11, 2021, 10:22pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/13 "2021-03-11T22:22:23Z")
thank you for sharing! ---
**Author:** ![ninjaroll](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@ninjaroll](https://answers.netlify.com/u/ninjaroll)\ **Post date:** [December 13, 2022, 5:39pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/14 "2022-12-13T17:39:46Z")
OMG, thank you!! I’ve spent days trying to troubleshoot this. ---
**Author:** ![codeworm](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/codeworm/32/51132_2.png) [@codeworm](https://answers.netlify.com/u/codeworm)\ **Post date:** [May 1, 2023, 3:21am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/15 "2023-05-01T03:21:20Z")
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. ---
**Author:** ![SamO](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/samo/32/41847_2.png) [@SamO](https://answers.netlify.com/u/SamO)\ **Post date:** [May 1, 2023, 1:25pm UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/16 "2023-05-01T13:25:00Z")
Thanks for sharing that extra feedback. (: ---
**Author:** ![fadingbeat](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/fadingbeat/32/52903_2.png) [@fadingbeat](https://answers.netlify.com/u/fadingbeat)\ **Post date:** [February 13, 2024, 8:55am UTC](https://answers.netlify.com/t/cant-access-environment-variables/20314/17 "2024-02-13T08:55:32Z")
A working solution, thank you! 🙂 Here is a StackOverflow for that as well: >