React/Node page deployment on Replit/Heroku results in blank page
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"
}
}