npm start giving a blank screen. Its not showing my app-CodePudding

Its giving me blank page on the home screen.How can I resolve it ? I want to render my frontend and want to see my website on the screen but its giving me "Cannot get/". My frontend it built in React.js how can I connect it with node.js and express to view it on the screen?

Here is my code-

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 code -

    <!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>

I've tried several ways but unable to resolve it. Is it due to cloudinary or mongoDB database?

I have added some code and modified several parts of it, but the error cannot be rectified.

How can I solve this?

CodePudding user response：

get/ denotes here about default end point which is of type get and contains only / in URL. Here in your code, all your endpoints starts with /api so you can add a new default endpoint/route like:

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

It will display Hello World on you browser when you will navigate to home screen.

CodePudding user response：

Because you do not have any home route. Add a home route on top like bellow.

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

CodePudding user response：

create an index.html with the index.js file included in it and server that index.html for your home route. Do as follow in your backend

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