在本地主机上无法访问 React+Node+Express 应用程序：3000

Question

I have a web app with React as frontend and node+express as backend . The folder structure of app is as in the pic below ( client folder is within the server folder)

The package.json in the client has the following code

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

The package.json in the server has the following code

"scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },

When I execute npm run dev , I get the message the my server is running on port 8080 and the react app is also compiled successfully and can be viewed on http://localhost:3000

But when I visit http://localhost:3000, i get the following

It was working fine but when I added a button.module.css file, I got error from Typescript. One on the suggested solution on Stackoverflow was to create a declaration.d.ts file. The error is gone now but the site is not loading !!!

I don't how adding this file is the problem. I tried to run 'npm start' within the 'client` folder

But I do not know what happens, screen switches to 'npm run dev' within the 'server` folder

Can anyone help?

UPDATE

I created 2 more react app with npx create-react-app app --template typescript .

• One next to server folder and
• one within server folder (next to client folder)

both of them worked just fine. No issue connecting to localhost:3000.

So I went comparing the contents one by one of my folder and the folders newly created. As it turns out I had deleted the files named react-app-env.d.ts (this file is automatically created by npx create... ). I deleted because its content is just /// <reference types="react-scripts" /> and nothing else.

I have seen a lot of tutorials where they deleted all the files of the src folder & I though this file was 'not useful'

I have copied this file into my app folder & it works fine!!!

Lesson Learnt = DO NOT TOUCH what you don't understand; Especially when things are working ;-)

Answer 1

you want a multi-layer architecture but in think npm is working against you.

try unnnested projects, try single repo/multi project approach.

something like this: https://github.com/sombriks/palavrim/blob/main/package.json