Can't figue out my Deploying issue (MERN App to Heroku)

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!!!

Just to confirm, is your project structure something like containing client folder and server folder together under the project root folder? — Wenhe Qi, Aug 10 '20 at 05:21
Did you see https://stackoverflow.com/questions/42308879/npm-err-code-elifecycle — Joe, Aug 10 '20 at 05:50
Thanks. I revised the post and applied changes.... but nothing happened. Still the same. — Agustin Moragues, Aug 10 '20 at 14:12

score 0 · Answer 1 · edited Aug 11 '20 at 18:23

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.

Can't figue out my Deploying issue (MERN App to Heroku)

1 Answers1