如何在Heroku上托管NodeJS服务器并做出反应

Question

I have uploaded both the server and the react client, but the server interface is the one that shows, instead of the react interface.

I have tried mixing up the "scripts" part in the package.json file for the server, but it doesn't seem to help.

This is how the package.json for the server looks like:

{
  "name": "application",
  "version": "0.0.0",
  "private": true,
  "engines": {
    "node": "9.11.2",
    "npm": "6.x"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "cors": "^2.8.5",
    "csv-parser": "^2.3.0",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "express-mysql-session": "^2.1.0",
    "express-session": "^1.16.2",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "md5": "^2.2.1",
    "morgan": "~1.9.1",
    "multer": "^1.4.1",
    "mysql": "^2.17.1",
    "node-stringify": "^0.2.1",
    "xmlbuilder": "^13.0.2"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  },
  "scripts": {
    "start": "node ./bin/www",
    "client": "cd frontend && npm start",
    "heroku-postbuild": "cd frontend && npm install && npm run build"
  }
}

And this is the package.json for the client (frontend in this case):

{
  "name": "app-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@navjobs/upload": "^3.1.3",
    "async-validator": "^1.8.2",
    "axios": "^0.17.0",
    "canvas2pdf": "^1.0.5",
    "express": "^4.16.3",
    "file-exists": "^5.0.1",
    "fs2": "^0.3.4",
    "howler": "^2.0.5",
    "html2canvas": "^1.0.0-alpha.12",
    "js-file-download": "^0.4.7",
    "jspdf": "^1.3.5",
    "moment": "^2.22.1",
    "paginate-array": "^2.0.0",
    "path-exists": "^4.0.0",
    "react": "^16.3.1",
    "react-d3-tree": "^1.13.0",
    "react-dom": "^16.2.0",
    "react-google-login": "^3.0.10",
    "react-helmet": "^5.2.0",
    "react-html-parser": "^2.0.2",
    "react-native": "^0.55.2",
    "react-native-fs": "^2.13.3",
    "react-pagination-table": "^2.0.2",
    "react-redux": "^5.0.6",
    "react-reveal": "^1.2.1",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "^2.1.0",
    "react-style-tag": "^2.0.1",
    "react-toastify": "^4.0.0-rc.4",
    "reactable": "^1.1.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-pack": "^0.1.5",
    "redux-thunk": "^2.2.0",
    "semantic-ui-css": "^2.2.14",
    "semantic-ui-react": "^0.79.1",
    "shape-json": "^1.2.4",
    "styled-components": "^4.3.2",
    "underscore": "^1.9.0",
    "url-exists": "^1.0.3",
    "vis": "^4.21.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "precommit": "lint-staged"
  },
  "devDependencies": {
    "husky": "^0.14.3",
    "lint-staged": "^4.2.3",
    "prettier": "^1.7.2"
  },
  "lint-staged": {
    "*.js": [
      "prettier --tab-width 2 --single-quote --jsx-bracket-same-line --write",
      "git add"
    ]
  },
  "proxy": "http://localhost:3001"
}

And here is my file structure:

.
└── application
    ├── app.js
    ├── assets
    ├── bin
    ├── controllers
    ├── frontend
    │   ├── index.js
    │   ├── package.json (this is the package.json for the frontend)
    │   ├── public
    │   ├── README.md
    │   └── src
    ├── models
    ├── node_modules
    ├── package.json (this is the package.json for the server)
    ├── package-lock.json
    ├── public
    ├── routes
    └── views

To add just in case, my port listener for the server is located under /bin/www . I defined a port and then create a server = createHttpServer() where the server variable is the one listening to the port, and it is imported in app.js.

In case anyone knows how to fix my problem, please help me out. I want to test deploy my app online.

Answer 1

This may be an issue of the automatic git init when you use create-react-app - your frontend folder may have its own git folder. This causes an issue I call gitception. When you git init and create heroku from root - you will have another git folder in root. When you push to heroku - it will not include the frontend folder b/c it is a separate git instance. You can correct this by opening your project in an editor and visualize hidden files so you can see the git folders. Move the frontend git folder to the trash. Now you need to remove the frontend git instance from the cache: git rm -f --cached frontend && git add . && git commit -m 'Add frontend folder back to git repo' && git push heroku master