Mern 堆栈应用程序在本地 heroku 上工作但在部署时无法在线工作

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.

Answer 1

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

Answer 2

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"