Why can't I see my test text on the front page of my original React web app?

Question

As of now, my React app runs on port 3000 via npm start .

I've decided that I want to use MySQL for the web app I'm building via yarn add express mysql .

I made server.js listen in on port 3001.

Whenever I run nodemon server.js and then hit refresh, I'm not seeing test on the front page of my React app (which would indicate that everything works fine).

I can see test if I type localhost: 3001 in my browser but it's completely blank, meaning, I only see test and not the original front page of my web app. It's a whole new different page.

Inside package.json file, I tried to include "proxy":"http://localhost:3001" at the bottom of the file as well as various other places, but it still doesn't work.

How do I make it so that I can see test on the original front page of my web app ( port 3000 ) so I can conclude that everything's working fine and can proceed with integrating MySQL?

Here's my server.js file:

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

const app = express();

app.use(cors());

app.get('/', (req, res) => {
    res.send('test');
});

app.listen(3001, () => {
    console.log("listening port 3001");
});

Answer 1

Update

If you don't need to build and try your app in production, meaning you only need to run both of them for development then just use a proxy as suggested in the comments. Run both servers and make requests to your Express API routes on the frontend. You can add a proxy like this in your client's (React part) package.json file.

"proxy": {
    "/api/*": {
      "target": "http://localhost:3001"
    }
}

Then, any request made for /api/* on the frontend goes through your Express server.

For starting both servers at the same time, you can use concurrently . First install it on the server side:

yarn add concurrently

After installing it you add something like this in your scripts part:

"scripts": {
    "server": "nodemon index.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "prod": "NODE_ENV=production nodemon app.js"
},

I misunderstood your intention at first, this is why I gave an answer like the below one.

---

This is normal behavior since you haven't configured Express to serve your frontend properly.

First of all, for a React app you don't need any server at all. What you are using right now (on port 3000) is for developing purposes. So, after completing your app you should build it and configure Express to serve it statically.

First, build it:

 yarn build 

After this step, you will have static files in your client's build directory.

Now, your Express config should be something like this:

 const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); app.get('/test', (req, res) => { res.send('test'); }); app.use( express.static( "client/build" ) ); app.get( "*", ( req, res ) => res.sendFile( path.resolve( __dirname, "client", "build", "index.html" ) ) ); app.listen(3001, () => { console.log("listening port 3001"); }); 

Notice the route change for Express. I changed / with /test . So, when you hit /test you will see what your Express route serves. Other than this route you should see your React app.

Also, don't forget to change those if your setup is different:

path.resolve( __dirname, "client", "build", "index.html" )

and

 path.resolve( __dirname, "client", "build", "index.html" ) 

This means Express searches a client directory and you React app resides there.

PS: You will only start the Express server, there will be no more server for React since you don't need it to serve with Express.

Also, related part can be enhanced like this:

 if ( process.env.NODE_ENV === "production" ) { app.use( express.static( "client/build" ) ); app.get( "*", ( req, res ) => res.sendFile( path.resolve( __dirname, "client", "build", "index.html" ) ) ); } 

So, at runtime you can pass an environment variable and Express hits this route only in production.