Heroku & Netlify talking to each other?

Hey guys, I have successfully deployed my backend on Heroku (Node/Express/PostgreSQL) and when I npm start my React frontend on localhost, everything works perfectly. My frontend .env file has REACT_APP_API="https://mywebsite.herokuapp.com", and the React frontend is setup as so:

const API = process.env.REACT_APP_API

  getData = async () => {
    const dataListJson = await fetch(`${API}/myroute`)
    const dataList = await dataListJson.json()

When I deployed my frontend to Netlify, it now does not give back the data as it’s trying to read the Netlify URL, then the backend API, then the route:

GET https://www.mywebsite.com/undefined/myroute 404

The undefined is my herokuapp url. Haven’t run into this before…any ideas?

You say your backend has the .env file, but your frontend is calling it? If these are different repos / projects in their own right, you need that .env in the frontend codebase.

Hard to tell without seeing your app architecture, but that’d be my first guess.

1 Like

Sorry I made a mistake, that env variable is on my frontend.

Haha, shame… That woulda been an easy fix :slight_smile:

1 Like

Hahaha, yeah. It’s weird because it works when I run it on my machine. The second it goes live it breaks. (As with most things :thinking: )

I haven’t used Netlify, but I know heroku has a different way to handle environment variables.

Maybe Netlify doesn’t like .env files, or they need to be wired up differently somehow?

1 Like

I just tried it, but don’t believe that works either.

My guess is that Netlify deploys from git, and .env is in your .gitignore.

Since this doesn’t have to be a secret url, I’d just put the variable in the js file instead of a .env file.

1 Like

It’s not dangerous to have your backend url on git?

Nevermind, you were right. I rebuilt it and put the env variable in. It works!!

1 Like

Api keys, yes.

But anyone can open the network tab and see what api you are hitting.

As long as your api is appropriately secured, it’s not a problem.

1 Like