Netlify / React front end not connecting to Node.js / Express / MongoDB Atlas / Heroku backend but works in development/locally

Question

I am trying to deploy a MERN stack practise project for the first time. I am quite a new coder.

My project works perfectly fine in development/locally. My React app running on localhost:3000 connects to the Node/Express/MongoDB Atlas API that I deployed to Heroku & can make requests successfully. However when I open the deployed Netlify app it fails to load any data & the Heroku logs show no activity which suggests it's not connecting to the backend at all.

Here are some bits of code that may be relevant:

-----------Backend---------------

environment.js (info in <> redacted)

export const dbURI = process.env.MONGODB_URI || 'mongodb+srv://<name>:<password>@festivalist.iyq41.mongodb.net/festivalist?retryWrites=true&w=majority'
export const port = process.env.PORT || 4000
export const secret = process.env.SECRET || '<secret>'

index.js

import express from 'express'
const app = express()
import mongoose from 'mongoose'
import router from './config/router.js'
import { port, dbURI } from './config/environment.js'

const startServer = async () => {
  try {
    await mongoose.connect(dbURI, { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true })
    console.log('🚀 Database has connected successfully')

    app.use(express.json())

    app.use((req, _res, next) => {
      console.log(`🚨 Incoming request: ${req.method} - ${req.url}`)
      next()
    })

    app.use('/api', router)

    app.listen(port, () => console.log(`🚀 Express is up and running on port ${port}`))
  } catch (err) {
    console.log('🆘 Something went wrong starting the app')
    console.log(err)
  }
}
startServer()

package.json

{
  "name": "sei-project-three",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "bcrypt": "^5.0.1",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongo": "^0.1.0",
    "mongoose": "^5.12.0",
    "nodemon": "^2.0.14"
  },
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "seed": "node db/seeds.js",
    "dev": "nodemon",
    "start": "node index.js"
  },
  "devDependencies": {
    "eslint": "^7.22.0"
  },
  "engines": {
    "node": "16.8.0"
  }
}

-------------Front end --------------

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', { target: 'https://festivalist-api.herokuapp.com', "changeOrigin": true }))
}

example request

const ArtistIndex = () => {
  const [artists, setArtists] = useState([])

  useEffect(() => {
    const getData = async () => {
      const { data } = await axios.get('/api/artists')
      setArtists(data)
    }
    console.log('artists2', artists)
    getData()
  }, [])

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.21.1",
    "http-proxy-middleware": "^1.0.5",
    "mapbox-gl": "^2.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-map-gl": "^5.2.5",
    "react-mapbox-gl": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "sass": "^1.42.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.25.0",
    "@typescript-eslint/parser": "^4.25.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.27.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.7.2",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}

Some notes:

• I have whitelisted all IP addresses in MongoDB Atlas 0.0.0.0/0
• I'm unsure why but I have to put '/api/' on the end of the heroku api url to get the data ie: https://festivalist-api.herokuapp.com/api/festivals
• I added Config Vars in Heroku but I think that stopped my app from working locally so I deleted them. Also not fully sure I understand what they do.

I have been trying to deploy this for days now so any advice would be a help or any troubleshooting tips since I am new to coding! Thanks

Answer 1

You have to put '/api' in at the end of heroku API because that's what you've used in your backend index.js app.use('/api', router)

The problem seems like something to do with the middle-wear setupProxy.js since you can ping the API already. One workaround is to just update your requests to use the full URI. ie

const ArtistIndex = () => {
  const [artists, setArtists] = useState([])

  useEffect(() => {
    const getData = async () => {
      const { data } = await axios.get('https://festivalist-api.herokuapp.com/api/artists')
      setArtists(data)
    }
    console.log('artists2', artists)
    getData()
  }, [])