NPM开始黑屏.它没有显示我的应用程序



它让我在主屏幕空白页。我该如何解决?我想渲染我的前端,并希望在屏幕上看到我的网站,但它给我"无法获得/"。我的前端是在React.js中构建的,我怎么能将它与node.js连接起来,并表示要在屏幕上查看它?

这是我的代码-

require('dotenv').config({ path: 'env' });
const dotenv = require("dotenv");
dotenv.config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const SocketServer = require('./socketServer');
const corsOptions = {
Credential: 'true',

};

const app = express();

app.use(express.static("C:/Users/chirag/Downloads/mern-social-media-master/mern-social-media-master/" + '/public'));
app.get('/', (req,res,next) => {
res.sendfile("C:/Users/chirag/Downloads/mern-social-media-master/mern-social-media-master/" + "/public/index.html");
})
app.use(express.json())
app.options("*" , cors(corsOptions));
app.use(cors(corsOptions));
app.use(cookieParser())

//#region // !Socket
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', socket => {
SocketServer(socket);
})
//#endregion
//#region // !Routes
app.use('/api', require('./routes/authRouter'));
app.use('/api', require('./routes/userRouter'));
app.use('/api', require('./routes/postRouter'));
app.use('/api', require('./routes/commentRouter'));
app.use('/api', require('./routes/adminRouter'));
app.use('/api', require('./routes/notifyRouter'));
app.use('/api', require('./routes/messageRouter'));
//#endregion

const URI = process.env.MONGODB_URL;
mongoose.connect(URI, {
useCreateIndex:true,
useFindAndModify:false,
useNewUrlParser:true,
useUnifiedTopology:true
}, err => {
if(err) throw err;
console.log("Database Connected!!")
})
const port = process.env.PORT || 8080;
http.listen(port, () => {
console.log("Listening on ", port);
});
HTML代码-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<script type="text/javascript" src='C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js'></script>
<title>Web App</title>
</head>
<body>
<script type="text/javascript" src='C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js'></script>
</body>
</html>

我尝试了几种方法,但无法解决它。是由于cloudary或mongoDB数据库?

我添加了一些代码并修改了几个部分,但错误无法纠正。

我该如何解决这个问题?

get/表示默认的端点类型为get, URL中只包含/。在您的代码中,所有端点都以/api开头,因此您可以添加一个新的默认端点/路由,如:

app.get('/',(req, res) => {
res.send("Hello World")
})

当你导航到主屏幕时,它会在浏览器上显示Hello World。

因为你没有任何主路。在顶部添加一个home路径,就像下面那样。

app.use('/', (req,res,next) => {
return res.json('this is home route')
});

创建一个index.html,其中包含index.js文件,并将该index.html作为你的主路由。在您的后端

中执行如下操作
// add following
app.use(express.static(__dirname + '/public'));

// Remove Following
app.get('C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js',(req, res) => {
res.send("C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js")
})
// Add Following
app.get('/', (req,res,next) => {
res.sendfile(__dirname + '/public/index.html');
})