Die Bereitstellung einer React/Node-Seite auf Replit/Heroku führt zu einer leeren Seite
Ich erstelle einen E-Commerce-Dienst mit React und NodeJS/Express. Ich habe mein Projekt auf Replit bereitgestellt, aber leider funktioniert es nur auf meinem lokalen Server. Bei anderen Geräten ist der Bildschirm einfach leer. Ich glaube, meine Servereinstellungen sind durcheinander. Ich bin auf StackOverflow auf einige ähnliche Themen gestoßen, habe aber keine Lösungen gefunden. Gerne gebe ich Tipps zur richtigen Einrichtung.
Mein 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'));
});
Meine Umgebungsdateien
MONGO_URL = mongodb+srv://user:[email protected]/prospero?retryWrites=true&w=majority SECRET = pass NODE_ENV = production PASS_SEC = marc
Mein Profil
export const API_URL = (process.env.NODE_ENV === 'production') ? '/' : 'http://localhost:8000/';
Meine Gitignore-Datei
# 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-Datei
{
"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"
}
}