Le déploiement de la page React/Node sur Replit/Heroku entraîne une page vierge

Question

Je crée un service e-commerce en utilisant React et NodeJS/Express. J'ai déployé mon projet sur Replit mais malheureusement il ne fonctionne que sur mon serveur local. Sur d'autres appareils, l'écran est tout simplement vide. Je pense que les paramètres de mon serveur sont erronés. Je suis tombé sur des sujets similaires sur StackOverflow mais je n'ai trouvé aucune solution. Je serais heureux de vous fournir des conseils sur la façon de le configurer correctement.

Mon serveur index.js

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'));
});

Mes fichiers d'environnement

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

Mon profil

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

Mon fichier gitignore

# 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*

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

Answer 1

Essayez ceci

Essayez d'ajouter cette ligne dans votre fichier package.json

"home" : "."