首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >npm开始显示空白屏幕。没有显示我的应用程序

npm开始显示空白屏幕。没有显示我的应用程序
EN

Stack Overflow用户
提问于 2021-10-16 06:32:25
回答 3查看 563关注 0票数 0

它在主screen.How上给了我一个空白页面,我能解决它吗?我想渲染我的前端,并想在屏幕上看到我的网站,但它给了我“无法获取/”。我的前端是用React.js构建的,我如何将它与node.js和express连接起来,以便在屏幕上查看它?

这是我的代码-

代码语言:javascript
运行
复制
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代码-

代码语言:javascript
运行
复制
    <!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:\Users\chirag\Downloads\mern-social-media-master\mern-social-media-master\client\src\index.js'></script>
  <title>Web App</title>
  </head>
  <body>
    <script type="text/javascript" src='C:\Users\chirag\Downloads\mern-social-media-master\mern-social-media-master\client\src\index.js'></script>
  </body>
 </html>

我试过几种方法,但都无法解决这个问题。是因为cloudinary还是mongoDB数据库?

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

我该如何解决这个问题呢?

EN

回答 3

Stack Overflow用户

发布于 2021-10-16 06:43:35

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

代码语言:javascript
运行
复制
app.get('/',(req, res) => {
     res.send("Hello World")
})

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

票数 0
EN

Stack Overflow用户

发布于 2021-10-16 06:44:51

因为您没有任何主路由。在顶部添加一条主路由,如bellow。

代码语言:javascript
运行
复制
app.use('/', (req,res,next) => {
   return res.json('this is home route')
});
票数 0
EN

Stack Overflow用户

发布于 2021-10-16 07:20:32

创建一个index.html,其中包含index.js文件,并为您的主路由创建index.html服务器。在你的后台做如下操作

代码语言:javascript
运行
复制
    // add following
    app.use(express.static(__dirname + '/public'));
    
    // Remove Following
    app.get('C:\Users\chirag\Downloads\mern-social-media-master\mern-social-media-master\client\src\index.js',(req, res) => {
     res.send("C:\Users\chirag\Downloads\mern-social-media-master\mern-social-media-master\client\src\index.js")
})

// Add Following
app.get('/', (req,res,next) => {
  res.sendfile(__dirname + '/public/index.html');
})
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69593276

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档