ruby on rails - React frontend deployment to heroku issues. 404 error

Question

I am new to react and heroku. My backend is Ruby on Rails.

I followed this guide: https://dev.to/caicindy87/deploying-rails-api-backend-react-frontend-app-to-heroku-5a25#prep-before-deploy

This is the image of the instructions I followed

If the guide is wrong can someone recommend me some other guide.

404 error image

This is my log.

2021-01-12T15:09:17.755287+00:00 heroku[run.7334]: Starting process with command `bash`
2021-01-12T15:19:04.751647+00:00 heroku[run.7334]: Process exited with status 0
2021-01-12T15:19:04.804944+00:00 heroku[run.7334]: State changed from up to complete
2021-01-12T15:20:20.161822+00:00 app[web.1]: 10.150.246.196 - - [12/Jan/2021:15:20:20 +0000] "GET / HTTP/1.1" 404 178 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
2021-01-12T15:20:20.162671+00:00 heroku[router]: at=info method=GET path="/" host=my-task-app-21.herokuapp.com request_id=2c8ed60c-af46-43ae-b71e-057c3d9ebd7c fwd="218.212.49.151" dyno=web.1 connect=1ms service=3ms status=404 bytes=390 protocol=https
2021-01-12T15:53:39.188602+00:00 heroku[web.1]: Idling
2021-01-12T15:53:39.190753+00:00 heroku[web.1]: State changed from up to down
2021-01-12T15:53:40.249042+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-01-12T15:53:40.316463+00:00 app[web.1]: Going down, terminating child processes...
2021-01-12T15:53:40.403686+00:00 heroku[web.1]: Process exited with status 0

My package.json

{
  "name": "task-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fullcalendar/bootstrap": "^5.5.0",
    "@fullcalendar/core": "^5.5.0",
    "@fullcalendar/daygrid": "^5.5.0",
    "@fullcalendar/react": "^5.5.0",
    "@fullcalendar/timegrid": "^5.5.0",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "bootstrap": "^4.5.3",
    "material-table": "^1.69.2",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-meta-tags": "^1.0.1",
    "react-moment": "^1.1.1",
    "react-responsive": "^8.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-tagsinput": "^3.19.0",
    "react-tagsinput-special": "^1.6.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

My React files

Solved

Solved I didn't include the static.json and it somehow works.

Answer 1

等待大神答复