0

Every time I start my application locally I need to run:

  • npm start (to start my React app)
  • node server.js (to start my node.js server)

How can I host this website?

Another issue I run into:

  • I run my React app on localhost:3000
  • My node.js server listens on localhost:3000

As a result: When I refresh my application sometimes it says "Cannot GET /" because it is trying to GET the node.js server instead of the React App.

Here is my server.js file for reference

const express = require('express');
const nodemailer = require('nodemailer');
require('dotenv').config()
const app = express();
var bodyParser = require('body-parser')
app.use( bodyParser.json() );  
app.use(bodyParser.urlencoded({
  extended: true
})); 

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}...`);
});

const transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 587,
    auth: {
      user: process.env.EMAIL,
      pass: process.env.PASS,
    },
  });

  transporter.verify(function(error, success) {
    if (error) {
      console.log(error);
    } else {
      console.log("Server is ready to take our messages");
    }
  });

  app.post('/send', (req, res, next) => {
    console.log(req.body)
    var name = req.body.contactName
    var email = req.body.contactEmail
    var subject = req.body.contactSubject
    var message = req.body.contactMessage
  
    var mail = {
      from: name,
      to: email,
      subject: subject,
      text: message
    }
  
    transporter.sendMail(mail, (err, data) => {
      if (err) {
        res.json({
          status: 'fail'
        })
      } else {
        res.json({
         status: 'success'
        })
      }
    })
  });

Any suggestions on the correct way to do this would be appreciated. Thanks!

UPDATE

Apparently the 'Cannot Get /' is a common issue for node.js react applications and I need to add in something like this into my server.js:

app.route("/").get(function (req, res) {
  res.redirect("/public/index.html");
});

Can anyone help with this method to redirect get requests to my node.js server to the home page of my react app?

5
  • Did you use create-react-app to bootstrap your react app? Just trying to figure if you're using webpack. Commented Aug 16, 2021 at 0:47
  • 1
    Do you mean your react app listens on port 3000? You can't have two different applications running on the same port Commented Aug 16, 2021 at 0:49
  • As smac89 said, you cannot run two apps in the same port. What url is called from react to your api? Commented Aug 16, 2021 at 0:52
  • My bad, I reworded the question. My sever.js is listening on localhost:3000 (where the React app is running). And yes I used create-react-app to bootstrap the react app. The issue is when I refresh the app is says "cannot get /", if I run the react app using 'npm start', load the webpage (localhost:3000) and then run 'node server.js' to start my server, everything works fine until I refresh the webpage. After that it says 'Cannot Get /' Commented Aug 16, 2021 at 0:56
  • Also wondering how this works in a deployment environment. Do I host my react app then run my node.js server separately? I come from a C#/.NET background so I apologize if these seem like dumb questions lol Commented Aug 16, 2021 at 1:08

1 Answer 1

2

Sorry for my noob question!!

Here is the solution: https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/

Need to add in a proxy to package.json: ..."proxy": "http://localhost:3001",...

and host the node.js server on 3001.

Then you run your React app on 3000 and it can make requests to your node.js server running on port 3001.

Thanks for the help everyone!

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.