Can't figue out my Deploying issue (MERN App to Heroku) - node.js

Question

This is my prompt lines once I try to push: (There are two backend errors and a client one)
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! suripanta#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the suripanta#0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.tBESZ/_logs/2020-08-09T21_38_02_253Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! backend#1.0.0 build: `cd client && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the backend#1.0.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.tBESZ/_logs/2020-08-09T21_38_02_269Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! backend#1.0.0 heroku-postbuild: `npm run install-client && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the backend#1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.tBESZ/_logs/2020-08-09T21_38_02_286Z-debug.log
remote:
remote: -----> Build failed
And here are my package.json for each one:
client:
{
"name": "suripanta",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.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"
]
}
}
Backed ( server named index.js)
{
"name": "backend",
"version": "1.0.0",
"description": "Backend para las notas de mi sister",
"main": "index.js",
"scripts": {
"start":"nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cd client && npm run build",
"install-client":"cd client && npm install",
"heroku-postbuild":"npm run install-client && npm run build"
},
"engines": {
"node": "12.18.1",
"npm": "6.14.5"
},
"author": "RichterBelmont DevStudio",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"connect-multiparty": "^2.2.0",
"express": "^4.17.1",
"mongoose": "^5.9.25",
"validator": "^13.1.1"
},
"devDependencies": {
"nodemon": "^2.0.4"
}
}
Also my index.js from backend:
'use strict'
//cargo el mongoose
var mongoose=require('mongoose');
const mongodb_uri_atlas_cluster='mongodb+srv://xxxxx:xxxxx#clusterxxxxx.lw1xj.mongodb.net/<dbname>?retryWrites=true&w=majority';
mongoose.set('useFindAndModify',false);
mongoose.Promise=global.Promise;
var app=require('./App');
var port=process.env.port || 3900; //primer cambio
//conexión a mongodb
/*
mongoose.connect(mongodb_uri_atlas_cluster || 'mongodb://localhost:27017/suripanta_rest',{useNewUrlParser:true})
.then(()=>{
//acá ya me conecté a mongodb
console.log("conexión a bd se ha realiazo bien! Me voy para arriba");
//Crear servidor y escuchar peticiones http
app.listen(3900,()=>{
console.log('Servidor corriendo correctamente en http://localhost:'+port);
})
})
*/
mongoose.connect(process.env.mongodb_uri_atlas_cluster || 'mongodb://localhost:27017/suripanta_rest',{useNewUrlParser:true})
.then(()=>{
//acá ya me conecté a mongodb
console.log("conexión a bd se ha realiazo bien! Me voy para arriba");
if(process.env.NODE_ENV== 'production'){
app.use(express.static('client/build'));
}
//Crear servidor y escuchar peticiones http
app.listen(3900,()=>{
console.log('Servidor corriendo correctamente en http://localhost:'+port);
})
})
I think it is a silly detail which I am missing. I am brand new on deploying mern app and I've followed different tutorials since there's not a lot of information on how to for heroku.
Thanks in advance!!!

Answer 1

I had similar issue with one of my project, in which both front-end and back-end are under the same root directory. Here is how my project is organized:
myproject
|----- client
| | ---- build
| | ---- package.json
|----- server
| | ---- package.json
| | ---- index.js
|----- index.js
|----- package.json
I use the index.js under root folder to serve both the front-end(build folder) and the server in server folder. Beside that, I have three different package.json files, one for front-end, one for back-end and one for the overall project.
In order to make it work on Heroku. I have to specify all the build command in package.json under root folder, specially the npm install command.
Following is my build command as an example:
"scripts": {
"start": "node index.js",
"build": "cd client && npm install && npm run build && cd ../server && npm install"
},
As Heroku will only execute npm install under root folder by default, the client folder and server folder will not have the dependencies installed. In above command I can ask Heroku to execute the commands between && one by one so no dependencies will be missing and it also knows how to serve the app. Your build command might look a little different while the idea is the same.
My repo here FYR.