Having trouble deploying React app with a server on Heroku

84
July 26, 2021, at 3:20 PM

I am having trouble deploying on Heroku my React app and server. I have successfully Deployed on Heroku before but for some reason, I forgot how to properly do it. The webpage displays but the fetch call does not working for some reason

my file structure looks like this

build
node_modules
public
src <=-=-= React app is here
env
Procfile
server.js

my Procfile looks like this

web: node server.js

here is my package.json

  "scripts": {
    "start": "node server.js",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

my server.js file looks like this

const express = require("express");
const fetch = require("node-fetch");
const bodyParser = require("body-parser");
const methodOverride = require("method-override");
const cors = require("cors");
const app = express();
const path = require("path");
require("dotenv").config();
const PORT = process.env.PORT || 4000;
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.json());
app.use(methodOverride("_method"));
app.get("/", async (req, res) => {
  try {
    const resp = await fetch(process.env.API_URL, {
      method: "GET",
      headers: {
        "x-api-key": process.env.API_KEY,
      },
    });
    const data = await resp.json();
    res.json(data);
  } catch (e) {
    res.json(e);
  }
});
if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "build")));
  app.get("/*", (req, res) => {
    res.sendFile(path.join(__dirname, "build", "index.html"));
  });
}
app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});

here is my env file

API_KEY=SOME_KEY
API_URL=SOME_URL

and finally here is an example of my fetch call in the React app

  const fetchData = async () => {
    try {
      const resp = await fetch("http://localhost:4000");
      const data = await resp.json();
      data && setHadith(data);
    } catch (e) {
      setHadith(e);
    }
  };

my error message and its pointing to my fetch call

react-dom.production.min.js:216 TypeError: Cannot read property '0' of undefined
    at I (Home.js:53)
    at al (react-dom.production.min.js:157)
    at $l (react-dom.production.min.js:180)
    at Hi (react-dom.production.min.js:269)
    at Pu (react-dom.production.min.js:250)
    at _u (react-dom.production.min.js:250)
    at xu (react-dom.production.min.js:250)
    at vu (react-dom.production.min.js:243)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
ii @ react-dom.production.min.js:216
Home.js:53 Uncaught (in promise) TypeError: Cannot read property '0' of undefined
    at I (Home.js:53)
    at al (react-dom.production.min.js:157)
    at $l (react-dom.production.min.js:180)
    at Hi (react-dom.production.min.js:269)
    at Pu (react-dom.production.min.js:250)
    at _u (react-dom.production.min.js:250)
    at xu (react-dom.production.min.js:250)
    at vu (react-dom.production.min.js:243)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
READ ALSO
pymysql error message (INSERT INTO function)

pymysql error message (INSERT INTO function)

I encountered error message (INVALID SYNTAX) and have no idea why it happensPlease help to figure it out

99
How can I format a String number to have commas in Kotlin?

How can I format a String number to have commas in Kotlin?

i have this code to calculate distance from 2 points(lat,lon)

85
How do i select dropdown values which is outside from easyui datagrid table

How do i select dropdown values which is outside from easyui datagrid table

I'm working on the Codeigniter web application where I have used the jquery easyui Datagrid table, I have created the dropdown which is outside from the easyui Datagrid table, now how do I select dropdown value when Datagrid table is loaded?

66