having trouble deploying react app with mongo db to heroku

Question

i have a react app that works locally when i do an npm run start but then fails to deploy on heroku and the only error i get is 'This app may not specify any way to start a node process'

this is currently my package.json scripts

    "start": "react-scripts start",
    "start:prod": "node server/server.js",
    "start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
    "client": "cd client && npm run start",
    "seed": "node server/scripts/seedDB.js",
    "install": "cd client && npm install",
    "build": "cd client && npm run build",
    "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
  },

And my file structer

//client
   |
   +-node modules
   + public
   +-src
   +-package-lock
   +-package.json
        
//node_modules
//server
    |
    +-models
    +-server.js
    +-routes
    +-middlewares
    +-config
+-package-lock.json
+-package.json

this is my server.js

require('dotenv').config();

const express = require('express');
const morgan = require('morgan');
const session = require('express-session');
const MongoStore = require('connect-mongo')(session);
const dbConnection = require('./config/connection');
const passport = require('./config/passport');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 8090;

// Middlewares
app.use(morgan('dev'));
app.use(express.urlencoded({extended: false}));
app.use(express.json());
app.use(express.static('client/build'));

app.get('*', (req, res) => {
  return res.sendFile(path.resolve('client', 'build', 'index.html'));
});

// Passport
app.use(passport.initialize());
app.use(passport.session()); // will call the deserializeUser
app.use(session({
  secret: 'my_secret', // process.env.AUTH_SECRET,
  store: new MongoStore({ mongooseConnection: dbConnection }),
  resave: false,
  saveUninitialized: false
}));

// app.get('/', (req, res) => {
//   res.sendFile(path.join(__dirname, '../client/build/'))
// });

// Add Auth and API routes
app.use('/auth', require('./routes/authRoutes'));
app.use('/api', require('./routes/apiRoutes'));

// If no routes are hit, send the React app
app.use(function(req, res) {
  res.sendFile(path.join(__dirname, '../../client/build/index.html'));
});

// Error handler
app.use(function(err, req, res, next) {
    console.error(err.stack);
    res.status(500);
})

app.listen(PORT, () => {
    console.log(`App listening on PORT: ${PORT}`);
});

and then the error i get on heroku

This app may not specify any way to start a node process

dhruv479 dhruv479 · Accepted Answer · 2021-02-27T16:01:30

You need to serve the react static files with the node server to achieve what you are trying to do. Add this in your server.js

app.use(express.static('client/build'));

app.get('*', (req, res) => {
  return res.sendFile(path.resolve('client', 'build', 'index.html'));
});

having trouble deploying react app with mongo db to heroku

1 Answers