Penggunaan halaman React/Node pada Replit/Heroku menghasilkan halaman kosong
Saya sedang membuat perkhidmatan e-dagang menggunakan React dan NodeJS/Express. Saya telah menggunakan projek saya pada Replit tetapi malangnya ia hanya berfungsi pada pelayan tempatan saya. Pada peranti lain, skrin hanya kosong. Saya rasa tetapan pelayan saya rosak. Saya menjumpai beberapa topik serupa di StackOverflow tetapi tidak menemui sebarang penyelesaian. Saya berbesar hati untuk memberikan sebarang petua tentang cara menyediakannya dengan betul.
Pelayan index.js saya
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'));
});
Fail persekitaran saya
MONGO_URL = mongodb+srv://user:[email protected]/prospero?retryWrites=true&w=majority SECRET = pass NODE_ENV = production PASS_SEC = marc
Profil Saya
export const API_URL = (process.env.NODE_ENV === 'production') ? '/' : 'http://localhost:8000/';
Fail gitignore saya
# 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*
fail json
{
"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"
}
}