React/Node page deployment on Replit/Heroku results in blank page

Question

I'm making an e-commerce service using React and NodeJS/Express. I have deployed my project on Replit but unfortunately it only works on my local server. On other devices, the screen is just blank. I think my server settings are messed up. I came across some similar topics on StackOverflow but didn't find any solutions. I'd be happy to provide any tips on how to set it up correctly.

My index.js server

const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const cors = require('cors');
const session = require('express-session');
const MongoStore = require('connect-mongo');
const path = require('path');

// set dotenv
dotenv.config();

// set app 
const app = express();
app.listen(process.env.PORT || 8000, () => {
  console.log('Server is running on port 8000', process.env.PORT)
});

// mongoDB connection 
mongoose
  .connect(process.env.MONGO_URL, {
    useNewUrlParser: true, 
    useUnifiedTopology: true 
  })
  .then(() => {console.log('DB connection succesfull')})
  .catch((err) => {console.log('DB error is', err)});

// middleware
app.use(cors({
  origin: ["http://localhost:3000", "http://localhost:8000"],
  methods: ['POST', 'PUT', 'GET', 'OPTIONS', 'HEAD', 'DELETE'],
  credentials: true
}))
if(process.env.NODE_ENV !== 'production') {
  app.use(
    cors({
      origin: ['http://localhost:3000'],
      credentials: true,
    })
  );
} 
app.use(express.json());
app.use(express.urlencoded({ extended: false}));
app.use(session({ 
  secret: process.env.SECRET,
  store: MongoStore.create(mongoose.connection),
  resave: false,
  saveUninitialized: false,
  /* This cause error in creating user session - no login available
  cookie: {
    secure: process.env.NODE_ENV == 'production',
  },*/
}));

// access to storage folder
app.use(express.static(path.join(__dirname, '/client/build')));

// import routes
const userRoute = require('./routes/user.routes');
const authRoute = require('./routes/auth.routes');
const productRoute = require('./routes/products.routes');
const orderRoute = require('./routes/order.routes');

// use routes
app.use('/api', userRoute);
app.use('/auth', authRoute);
app.use('/products', productRoute);
app.use('/orders', orderRoute);

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

My environment file

MONGO_URL = mongodb+srv://user:[email protected]/prospero?retryWrites=true&w=majority
SECRET = pass
NODE_ENV = production
PASS_SEC = marc

My configuration file

export const API_URL = (process.env.NODE_ENV === 'production')
? '/'
: 'http://localhost:8000/';

My gitignore file

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production


# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

json file

{
  "name": "04-prosperostore",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/MarcinBieniek/ProsperoStore.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/MarcinBieniek/ProsperoStore/issues"
  },
  "homepage": "https://github.com/MarcinBieniek/ProsperoStore#readme",
  "dependencies": {
    "@mui/x-data-grid": "^6.0.2",
    "axios": "^1.3.4",
    "bcryptjs": "^2.4.3",
    "connect-mongo": "^4.6.0",
    "cors": "^2.8.5",
    "crypto-js": "^4.1.1",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "mongoose": "^7.0.1",
    "multer": "1.4.4",
    "nodemon": "^2.0.21",
    "path": "^0.12.7",
    "redux-thunk": "^2.4.2"
  }
}

Answer 1

Try this

Try adding this line in package.json file

"home" : "."