npm начинает выдавать пустой экран. Это не показывает мое приложение

#node.js #reactjs #express #frontend #backend

Вопрос:

Это дает мне пустую страницу на главном экране.Как я могу это решить ? Я хочу визуализировать свой интерфейс и хочу видеть свой веб-сайт на экране, но он дает мне «Не могу получить/». Мой интерфейс, в который он встроен 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) =gt; {  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 =gt; {  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 =gt; {  if(err) throw err;  console.log("Database Connected!!") })  const port = process.env.PORT || 8080; http.listen(port, () =gt; {  console.log("Listening on ", port); });  

HTML-код —

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="utf-8" /gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1" /gt;  lt;meta name="theme-color" content="#000000" /gt;  lt;script type="text/javascript" src='C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js'gt;lt;/scriptgt;  lt;titlegt;Web Applt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;script type="text/javascript" src='C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js'gt;lt;/scriptgt;  lt;/bodygt;  lt;/htmlgt;  

Я пробовал несколько способов, но не смог решить эту проблему. Связано ли это с базой данных cloudinary или MongoDB?

Я добавил некоторый код и изменил несколько его частей, но ошибка не может быть исправлена.

Как я могу решить эту проблему?

Ответ №1:

get/ здесь указывается конечная точка по умолчанию, которая имеет тип get и содержится только / в URL. Здесь, в вашем коде, все ваши конечные точки начинаются с /api , чтобы вы могли добавить новую конечную точку/маршрут по умолчанию, например:

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

Он отобразит Hello World в вашем браузере, когда вы перейдете на главный экран.

Комментарии:

1. Как я могу перенаправить его на файл, подобный моей домашней странице ?

Ответ №2:

Потому что у вас нет никакого домашнего маршрута. Добавьте сверху домашний маршрут, как показано ниже.

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

Комментарии:

1. Как я могу перенаправить его на файл, подобный моей домашней странице ?

2. это вы можете сделать на своем интерфейсе, если express-это просто серверная часть api.

3. Я не могу понять, как? У меня есть свой интерфейс в react.js но я не могу связать это с этим.

4. пожалуйста, поделитесь своим кодом интерфейса и измените свой вопрос как с внутренним, так и с внешним кодом, а также опишите, чего вы хотите достичь и какие ошибки вы получаете, если вы реализовали то же самое.

5. Я отредактировал его. Пожалуйста, прочтите вопрос еще раз и, пожалуйста, постарайтесь помочь мне с ним.

Ответ №3:

создайте 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) =gt; {  res.send("C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js") })  // Add Following app.get('/', (req,res,next) =gt; {  res.sendfile(__dirname   '/public/index.html'); })  

Комментарии:

1. Появляется какая-то пустая страница. Там не отображаются мои страницы интерфейса.

2. вы создали index.html с твоей index.js в вашем публичном режиссуре ? если да, поделитесь своим репозиторием github, если вам нужна дополнительная помощь

3. Я добавил приведенный выше HTML-код, а также обновленный экспресс-код.