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?

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.

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

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