Die Bereitstellung einer React/Node-Seite auf Replit/Heroku führt zu einer leeren Seite

Question

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"
  }
}

Answer 1

尝试这样做

在 package.json 文件中尝试添加此行

"home" : "."