Проблема с build проекта на React с разделением на директории client и server (express/node js)?

Question

hamster141095 @hamster141095

Проблема с build проекта на React с разделением на директории client и server (express/node js)?

Такая проблема, не совсем понимаю, как правильно настроить build проекта на React c node/js/express.
Я разделил проект на 2 папки -client, где само приложение React, и server - все, что касается node/js express/mongodb.
Структура проекта

package.json в корне

{
  "name": "d",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server/server.js",
    "server": "nodemon server/server.js",
    "client": "npm start --prefix client",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "concurrently  \"npm run server\"  \"npm run client\" ",
    "heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
  },
  "engines": {
    "node": "14.x"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "concurrently": "^5.3.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "^3.6.3",
    "mongoose": "^5.11.8"
  }
}

package.json в client

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "axios": "^0.21.1",
    "classnames": "^2.2.6",
    "concurrently": "^5.3.0",
    "json-server": "^0.16.3",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-google-font-loader": "^1.1.0",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "react-transition-group": "^4.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:3002"
}

По примеру настроил express на деплой на heroku

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
require("dotenv").config();

const items = require("./routes/api/card");

const mongoUri = `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@${process.env.DB_HOST}?retryWrites=true&w=majority`;
mongoose.connect(mongoUri, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
    useFindAndModify: false,
});

app.use(bodyParser.json());
app.use("/api/items", items);

app.use(express.static("/client/build"));

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

const port = process.env.PORT || 3002;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

На хероку все рабоает. Но как сделать локальный build проекта, при поомщи команды run build, чтобы появилась папка build с index.html

Если просто запускать run build в client , то index/html не работает, не подключает стили (хотя если вручную ставить точки перед ссылками на скрипты в index.html, то они подключаются . Но сервер при этом не работает. Подскажите что делать, либо статьи или примеры, где это делают, буду очень благодарен!