Background
I am trying to deploy a web application developed with Node.js and React on Heroku. I am using the Basic Dyno Types on Heroku.
The frontend resides in the root directory, and the backend is located under the server
directory.
The directory structure is roughly as follows:
MyProjectRoot/
├── build/
├── node_modules/
├── package.json
├── package-lock.json
├── public/
├── Procfile
├── src/
│ ├── App.js
│ └── index.js
└── server/
├── node_modules/
├── package.json
├── package-lock.json
└── index.js
Problem & Error Message
2023-09-18T04:40:57.634875+00:00 heroku[web.1]: Starting process with command `node server/index.js`
2023-09-18T04:40:58.849630+00:00 app[web.1]: node:internal/modules/cjs/loader:1080
2023-09-18T04:40:58.849651+00:00 app[web.1]: throw err;
2023-09-18T04:40:58.849651+00:00 app[web.1]: ^
2023-09-18T04:40:58.849651+00:00 app[web.1]:
2023-09-18T04:40:58.849651+00:00 app[web.1]: Error: Cannot find module 'cors'
2023-09-18T04:40:58.849651+00:00 app[web.1]: Require stack:
2023-09-18T04:40:58.849653+00:00 app[web.1]: - /app/server/index.js
2023-09-18T04:40:58.849656+00:00 app[web.1]: at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
2023-09-18T04:40:58.849657+00:00 app[web.1]: at Module._load (node:internal/modules/cjs/loader:922:27)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:1143:19)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:121:18)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at Object.<anonymous> (/app/server/index.js:7:14)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1256:14)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
2023-09-18T04:40:58.849659+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:1119:32)
2023-09-18T04:40:58.849659+00:00 app[web.1]: at Module._load (node:internal/modules/cjs/loader:960:12)
2023-09-18T04:40:58.849661+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
2023-09-18T04:40:58.849663+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2023-09-18T04:40:58.849663+00:00 app[web.1]: requireStack: [ '/app/server/index.js' ]
2023-09-18T04:40:58.849663+00:00 app[web.1]: }
2023-09-18T04:40:58.853044+00:00 app[web.1]:
2023-09-18T04:40:58.853046+00:00 app[web.1]: Node.js v18.17.1
2023-09-18T04:40:58.966012+00:00 heroku[web.1]: Process exited with status 1
2023-09-18T04:40:58.998730+00:00 heroku[web.1]: State changed from starting to crashed
2023-09-18T04:51:25.065554+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=xxxxxxx.herokuapp.com request_id=fa84c2bb-1795-4c08-be57-c4cfd1a0dee3 fwd="124.144.141.110" dyno= connect= service= status=503 bytes= protocol=https
2023-09-18T04:51:25.371635+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=xxxxxxx.herokuapp.com request_id=3c078552-a36e-4cba-bc5f-aa1fdfe21750 fwd="124.144.141.110" dyno= connect= service= status=503 bytes= protocol=https
Relevant Source Code
index.js under server
directory
const he = require('he');
const express = require('express');
const path = require('path');
const cors = require('cors');
const axios = require('axios');
const database = require('./database');
const app = express();
app.use(cors());
app.use(express.json());
app.use(express.static(path.join(__dirname, '..', 'build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));
package.json under server
directory
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.1.0",
"cors": "^2.8.5",
"date-fns-tz": "^2.0.0",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"firebase": "^10.3.0",
"firebase-admin": "^11.10.1",
"he": "^1.2.0",
"jsonwebtoken": "^9.0.1",
"pg": "^8.11.3",
"sequelize": "^6.33.0",
"sequelize-cli": "^6.6.1",
"uuid": "^9.0.0"
}
}
package.json in the root directory
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@hookform/resolvers": "^3.1.1",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.2",
"@reduxjs/toolkit": "^1.9.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.4.0",
"dompurify": "^3.0.5",
"firebase": "^10.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.45.2",
"react-query": "^3.39.3",
"react-quill": "^2.0.0",
"react-router-dom": "^6.14.1",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4",
"yup": "^1.2.0"
},
"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"
]
}
}
Procfile
web: node server/index.js
.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/server/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
/server/.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
Additional Information
Local environment versions:
- Node v18.16.1
- React v18.2.0
What I Want to Achieve
I want to deploy a web application developed with Node.js and React on Heroku.
What I’ve Tried
I modified the Procfile as follows:
web: cd server && node index.js
I also added a script to the package.json in the root directory, but the issue remains unchanged.
"postinstall": "npm run build"
2
Answers
I solved the problem by adding the following code. Thank you.
To fix this problem run this command on your project command line like terminal