Mern stack app working on heroku local but not working online when deploy

Question

I had my mern stack app on Heroku and previously it is working fine but now it is deploying fine but not working.

All the API are working fine but the frontend is not rendering.

When I visit the homepage it says

/app/client/build/index.html

all the API are working fine as it is

here is my package json for server

  "name": "***",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "client-install": "cd client && yarn install ",
    "server": "nodemon app",
    "start": "node app.js",
    "client": "cd client && yarn  start ",
    "dev": "concurrently \"yarn run server \" \"yarn run client\" ",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false &&  cd client && npm install && npm build "
  },
  "repository": {
    "type": "***",
    "url": "***"
  },
  "author": "",
  "license": "ISC",
  "homepage": "***",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "helmet": "^3.19.0",
    "jimp": "^0.6.4",
    "morgan": "^1.9.1",
    "multer": "^1.4.1"
  },
  "devDependencies": {
    "concurrently": "^4.1.1"
  }
}

And here is my package json for client

{
  "name": "***",
  "version": "0.1.0",
  "private": ***,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-brands-svg-icons": "^5.9.0",
    "@fortawesome/free-regular-svg-icons": "^5.9.0",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "file-saver": "^2.0.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-toastify": "^5.3.2",
    "reactstrap": "^8.0.1"
  },
  "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": {
    "node-sass": "^4.12.0"
  }
}

In both, I had dev dependencies and I switched from yarn to npm in my Heroku post-build.

here is my routing file in app.js

app.use(express.static(path.join(__dirname, "client", "build")));

app.use("/*", (req, res) => {
  res.send(path.join(__dirname, "client", "build", "index.html"));
});

If I had done any mistake then please point.

score 4 · Answer 1 · answered Apr 23 '20 at 21:12

4

Hi I was having the same problem, it's a mongodb Network access issue. I solved it by this: login to MongoDB > select you project > Network Access > ADD IP ADDRESS > click "ALLOW ACCESS FROM ANYWHERE"

answered Apr 23 '20 at 21:12

Tong Yu

167
1
5

I totally forgot about this. it didn't fix my problem but it would've been another problem added if I didn't see this. – user1189352 Jul 07 '20 at 02:19
Do you change this in the command line after entering `mongo`? I'm having the same problem and I need more specific instructions. – Ant Aug 07 '20 at 00:30

score 3 · Accepted Answer · answered Jul 29 '19 at 09:39

use

app.use('*', express.static(path.join(__dirname, "client", "build")))

instead of

app.use("/*", (req, res) => {
  res.send(path.join(__dirname, "client", "build", "index.html"));
});

I was getting similar error, don't know why, but solved the problem

Mern stack app working on heroku local but not working online when deploy

2 Answers2