在本地主機上無法訪問 React+Node+Express 應用程序：3000

Question

我有一個 web 應用程序，以 React 作為frontend ，以 node+express 作為backend 。 應用程序的文件夾結構如下圖所示（ client文件夾在server文件夾內）

client中的package.json有如下代碼

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

server中的package.json有如下代碼

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

當我執行npm run dev時，我收到消息說我的服務器正在端口 8080 上運行並且反應應用程序也已成功編譯並且可以在 http://localhost:3000 上查看

但是當我訪問 http://localhost:3000 時，我得到以下信息

它工作正常，但是當我添加一個button.module.css文件時，我從 Typescript 收到錯誤。Stackoverflow 上建議的解決方案之一是創建一個declaration.d.ts文件。 現在錯誤消失了，但是網站沒有加載！！！

我不知道添加這個文件是怎么回事。 我嘗試在“client”文件夾中運行“npm start”

但我不知道發生了什么，屏幕切換到“server”文件夾中的“npm run dev”

誰能幫忙？

更新

我使用npx create-react-app app --template typescript創建了另外 2 個 React 應用程序。

• 一個在server文件夾旁邊，
• server文件夾中的一個（在client文件夾旁邊）

他們兩個都工作得很好。 連接到 localhost:3000 沒有問題。

所以我去一個一個地比較我的文件夾和新創建的文件夾的內容。 事實證明我刪除了名為react-app-env.d.ts的文件（該文件由 npx npx create...自動創建）。 我刪除了，因為它的內容只是/// <reference types="react-scripts" /> ，沒有別的。

我看過很多教程，他們刪除了src文件夾的所有文件，雖然這個文件“沒用”

我已將此文件復制到我的應用程序文件夾中並且工作正常！！！

經驗教訓= 不要碰你不明白的東西； 尤其是當一切正常時 ;-)

Answer 1

您想要多層架構，但認為 npm 對您不利。

嘗試未嵌套的項目，嘗試單一回購/多項目方法。

像這樣的東西： https://github.com/sombriks/palavrim/blob/main/package.json