This is my first time using Heroku to deploy app and I had done a lot of research, I had tried all the ways that seem to make it work but still no luck. Of course, everything works on development mode (localhost), so I try to deploy it. I successfully get everything to work on Heroku local, then I try to publish to Heroku live, but it gives me "Failed to load resource: the server responded with a status of 503 (Service Unavailable)" error. But people say the Heroku local is like if you have deployed the app online, you see what you will see after you have deployed it. I really don't know what's wrong
One thing I am not sure about is, whether my folder structure is too complicated.
This is my folder structure, the root folder with package-lock.json, package.json, Procfile, and a sub-folder containing the frontend and backend folder. But it is working on Heroku local, so even the folder structure is a bit complicated, but it is still pointing to the right location to function???
Profile:
web: npm start
Package.json in root folder:
"name": "comic-bookstore",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cd comic-book-store/backend/ && node server.js",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false cd comic-book-store/frontend/ && npm install && npm run build",
"backend": "cd comic-book-store/backend/ && nodemon server.js",
"frontend": "cd comic-book-store/frontend/ && npm start",
"test": "echo \"Error: no test specified\" && exit 1"
}
Package.json in frontend folder:
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:3001",
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"env-cmd": "^10.1.0",
"jwt-decode": "^3.1.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^5.3.0",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "4.0.3",
"serve": "^13.0.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Package.json in backend folder:
"name": "backend",
"version": "1.0.0",
"engines": {
"node": "16.15.0",
"npm": "8.5.5"
},
"description": "",
"main": "server.js",
"homepage": ".",
"dependencies": {
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-session": "^1.17.2",
"express-validator": "^6.12.1",
"jsonwebtoken": "^8.5.1",
"mongodb": "^4.1.0",
"mongoose": "^5.13.7",
"multer": "^1.4.3",
"nodemon": "^2.0.13",
"webpack": "^5.72.1"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/node": "^7.x",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"prettier": "^2.3.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js"
}
server.js:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
// const session = require('express-session');
const cookieParser = require('cookie-parser');
const memberRoute = require('./routes/memberRoute');
const bookRoute = require('./routes/bookRoute');
const bookReservedRoute = require('./routes/bookReservedRoute');
const app = express();
const port = process.env.PORT || 3001;
const host = '0.0.0.0';
dotenv.config();
mongoose.connect(
process.env.DATABASE_ACCESS,
{
useNewUrlParser: true,
useUnifiedTopology: true,
},
() => console.log('Database connected')
);
app.use(express.json());
app.use(cors());
app.use('/app', memberRoute);
app.use('/app', bookRoute);
app.use('/app', bookReservedRoute);
app.use('/uploads', express.static('uploads'));
if(process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('/^((?!(app)).)*$/', (req, res) => {
res.sendFile(path.join(__dirname, '../frontend', 'build', 'index.html'))
})
}
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cookieParser());
app.listen(port, host, () => {
console.log(`Express server listening on port ${port} and host ${host}!`);
});
env file in backend folder:
DATABASE_ACCESS = mongodb+srv://<my-database-credential>@comic-bookstore.4zots.mongodb.net/Member?retryWrites=true&w=majority
JWT_SECRET = HJ2H2WUHJ2CHghwhh3hjndsndhje3ujjwquyhnshwy22
NODE_ENV = production
I had copied the above config var to Heroku dashboard as well.
heroku logs --tail
2022-05-31T07:27:37.302703+00:00 heroku[web.1]: Process exited with status 1
2022-05-31T07:27:37.397210+00:00 heroku[web.1]: State changed from starting to crashed
2022-05-31T07:27:37.427713+00:00 heroku[web.1]: State changed from crashed to starting
2022-05-31T07:27:45.314929+00:00 heroku[web.1]: Starting process with command `npm start`
2022-05-31T07:27:46.948920+00:00 app[web.1]:
2022-05-31T07:27:46.948931+00:00 app[web.1]: > comic-bookstore@1.0.0 start
2022-05-31T07:27:46.948932+00:00 app[web.1]: > cd comic-book-store/backend/ && node server.js
2022-05-31T07:27:46.948932+00:00 app[web.1]:
2022-05-31T07:27:47.337366+00:00 app[web.1]: node:internal/modules/cjs/loader:1189
2022-05-31T07:27:47.337376+00:00 app[web.1]: return process.dlopen(module, path.toNamespacedPath(filename));
2022-05-31T07:27:47.337376+00:00 app[web.1]: ^
2022-05-31T07:27:47.337377+00:00 app[web.1]:
2022-05-31T07:27:47.337378+00:00 app[web.1]: Error: /app/comic-book-store/backend/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid ELF header
2022-05-31T07:27:47.337378+00:00 app[web.1]: at Object.Module._extensions..node (node:internal/modules/cjs/loader:1189:18)
2022-05-31T07:27:47.337379+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:981:32)
2022-05-31T07:27:47.337379+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:822:12)
2022-05-31T07:27:47.337379+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:1005:19)
2022-05-31T07:27:47.337380+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:102:18)
2022-05-31T07:27:47.337380+00:00 app[web.1]: at Object.<anonymous> (/app/comic-book-store/backend/node_modules/bcrypt/bcrypt.js:6:16)
2022-05-31T07:27:47.337380+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1105:14)
2022-05-31T07:27:47.337380+00:00 app[web.1]: at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
2022-05-31T07:27:47.337381+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:981:32)
2022-05-31T07:27:47.337381+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:822:12)
2022-05-31T07:27:47.337381+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:1005:19)
2022-05-31T07:27:47.337381+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:102:18)
2022-05-31T07:27:47.337382+00:00 app[web.1]: at Object.<anonymous> (/app/comic-book-store/backend/routes/memberRoute.js:5:16)
2022-05-31T07:27:47.337382+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1105:14)
2022-05-31T07:27:47.337382+00:00 app[web.1]: at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
2022-05-31T07:27:47.337382+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:981:32) {
2022-05-31T07:27:47.337383+00:00 app[web.1]: code: 'ERR_DLOPEN_FAILED'
2022-05-31T07:27:47.337383+00:00 app[web.1]: }
2022-05-31T07:27:47.491907+00:00 heroku[web.1]: Process exited with status 1
2022-05-31T07:27:47.544210+00:00 heroku[web.1]: State changed from starting to crashed
2022-05-31T07:27:49.659165+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=sakura-comic-bookstore.herokuapp.com request_id=46ff615e-9342-4840-9138-8a6f99af5d6e fwd="151.210.168.207" dyno= connect= service= status=503 bytes= protocol=https
2022-05-31T07:27:50.267049+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=sakura-comic-bookstore.herokuapp.com request_id=c6af9a12-05e7-4deb-85dc-1e9fec2933c6 fwd="151.210.168.207" dyno= connect= service= status=503 bytes= protocol=https
2022-05-31T07:28:10.739605+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=sakura-comic-bookstore.herokuapp.com request_id=39a85204-136c-41e8-989a-ece16cabc887 fwd="151.210.168.207" dyno= connect= service= status=503 bytes= protocol=https
2022-05-31T07:28:11.279361+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=sakura-comic-bookstore.herokuapp.com request_id=44901387-4b2b-42a4-a15a-7747bd663d52 fwd="151.210.168.207" dyno= connect= service= status=503 bytes= protocol=https
I did not use the MongoDB sandbox in Heroku, I just connect my project database in Mongo Atlas when I developing the project. I think my database has no problem connecting with the app, I am able to see the data in Heroku local, the CRUD operations work fine in Heroku local.
Another thing I am not sure is, at the beginning of creating this project, I attempted to configure the React, Webpack, and Babel, but my tutor told me just use the React boilerplate, so I remove the config file of the Webpack, but I think I have not completely removed the Webpack and Babel dependencies in the frontend and backend folders, I am not sure if that affect the deployment in Heroku.
I really want to get the deployment done, and I think I had tries a lot of ways that seems to work, please give me a hint of what to do. I have no idea why everything work on Heroku local but not the Heroku live!!
