How to connect Frontend ReactJs Project Folder with NodeJs Backend?

Question

I Have a React web app that has crypto portfolio, Now I want to connect it with Backend server.js. The deployed web app should set start from Node Server. I am fairly new with NodeJS but Ive tried solutions like cors and all.

I am Fairely New to node can anyone please help me to connect my React folder to backend node folder. I'll be very grateful.

In react I've made Production Build also but it didn't worked.

Here's Server.js Code:

const express = require('express');
const cors = require('cors');
const path = require('path');

app.use(express.json({ extended: false }));

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  next();
});
if (process.env.NODE_ENV === 'production') {
  //static folder
  app.use(express.static('client/build'));
  app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

Now I am Getting the error in server

connot GET /

Github Project Link of frontend: https://github.com/Twelve03/crypto-portfolio

Answer 1

If you are starting the server using the code app.listen(3000); And it's still not working, then you might have to set the environment variable NODE_ENV=production you can do it like this NODE_ENV=production node server.js

Better practice will be to keep all you environment variables inside a .env file and then use the dotenv package to read the environment variables from the .env file