1

I have been working on this react app project for a while and am now attempting to develop a server (using node and express) and eventually a database for it (MongoDB).

My client-side react app has been up and running on localhost:3000 but now, after installing express, I'm confused as to whether I accidentally just created two different projects/directories.

My file structure for the whole project is in a screenshot attached.project files

I now have two package.json files and when I invoke npm start, my express app opens up on localhost:3000. However, I'm now unable to access my react app through npm start.

I'm a new coder and this is my first time doing this project with both the back-end and front-end pieces.

I tried to cd pawsforever to change the directory into my react app and it returned 'no such directory found'

I tried to add the following code to my index.js file in my react app but again, npm start only runs my express app.

const express = require("express");
const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`);
});

I'm wondering if there is a few lines of code I need to add somewhere to connect these two. Most of what I find online is about creating them both in one directory which perhaps I didn't do.

Joshua
  • 3,055
  • 3
  • 22
  • 37
IsabelleNM
  • 41
  • 5
  • Just use a different port for your express app so it won't conflict with your react app – Joshua Mar 03 '23 at 01:00
  • You can try to update port by following https://stackoverflow.com/questions/40714583/how-to-specify-a-port-to-run-a-create-react-app-based-project – deepakchethan Mar 03 '23 at 01:05
  • Just as @Joshua said modify your `port` variable from `3000` to `3001` (or any that's different than `3000` which is where your React tries to run). As for the "*I now have two package.json files*" - you don't, they are actually two different folders, one is inside your `puppyLove` folder while the second is inside `pawsforever` – Aleksandar Mar 03 '23 at 01:35

1 Answers1

0

Here is the step-by-step guide:

  1. Build the react app using npm run build.
  2. create the express server and add the below code.
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

Kindly refer to this page

For your reference, kindly look this repo

Start the repo project using npm run dev

Sharan K
  • 26
  • 5