CODEWITHSUNDEEP
herokuhostingmern
oladimeji
oladimeji

Reputation: 119

Why is my MERN app not displaying after deploying on HEROKU

My MERN app was successfully deployed on heroku. However, when I navigate to the URL, I get this error "{"status":"fail","message":"can't find / on this server"}". While I was in the process of deploying the MERN app. I put the client-side folder in the server folder. Below is an image of my folder structureenter image description here

Here is the code in my app.js

const express = require('express');
const cors = require('cors');
const morgan = require('morgan');
const AppError = require('./utils/appError');
const globalErrorHandler = require('./controllers/errorController');

const app = express();
app.use(cors());


const serviceUserRoute = require('./routes/serviceUserRoutes');
const carerRoute = require('./routes/carerRoutes');
const getPrivateDataRoute = require('./routes/privateRoute');
const taskRoute = require('./routes/taskRoute');
const visitRoute = require('./routes/visitRoute');
const visitInformationRoute = require('./routes/visitInformationRoute');

//MIDDLEWARES
if (process.env.NODE_ENV === 'development') {
  app.use(morgan('dev'));
}

app.use(express.json());

// custom middleware
app.use((req, res, next) => {
  // eslint-disable-next-line prettier/prettier
  console.log('middleware');
  next();
});

app.use((req, res, next) => {
  req.requestTime = new Date().toISOString();

  next();
});

app.use('/api/v1/serviceusers', serviceUserRoute);
app.use('/api/v1/carers', carerRoute);
app.use('/api/v1/task', taskRoute);
app.use('/api/v1/visit', visitRoute);
app.use('/api/v1/visitInformation', visitInformationRoute);
app.use('/api/v1/private', getPrivateDataRoute);

app.all('*', (req, res, next) => {
  next(new AppError(`can't find ${req.originalUrl} on this server`, 404));
});

app.use(globalErrorHandler);

module.exports = app;

Here is an image of the code in my server.js enter image description here

What am I doing wrong?

Upvotes: 0

Views: 128

Answers (1)

oladimeji
oladimeji

Reputation: 119

I added the code below to find the path to my static files in my application.

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
  app.get('*', (req, res) => {
    let filePath = path.resolve(__dirname, 'client/build', 'index.html');        
    res.sendFile(filePath);
  });
}

Upvotes: 1

Related Questions