Heroku & Netlify talking to each other?

JavaScript
1

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()
    this.setState({
      data
    })
  }

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?

2

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
3

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

4

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

1 Like
5

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

6

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
7

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

8

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
9

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

10

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

1 Like
11

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