title: heroku deployment with CRA and Express server
body: <p>I'm new to Heroku and I want to deploy an app that has an express server. The app is built successfully but any request to the API fail with a 404 error</p>
  <p>express server:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import express from "express";
  import { data, products } from "./data.js";
  import path from "path";
  const app = express();
  
  const __dirname = path.resolve();
  // console.log(__dirname);
  
  app.use(express.static("public"));
  app.use(express.static(path.join(__dirname, "app/build")));
  app.get("*", (req, res) =&gt;
    res.sendFile(path.join(__dirname, "build", "index.html"))
  );
  
  app.get("/api/products/:id", (req, res) =&gt; {
    // console.log(req.params.id);
    const keys = Object.keys(products);
    const productKey = Object.keys(products).find((key) =&gt; key === req.params.id);
    const product = products[productKey];
    // console.log(products[product]);
    if (product) {
      res.send(product);
    } else {
      res.status(404).send({ message: "Product Not Found" });
    }
  });
  
  app.get("/api/categories", (req, res) =&gt; {
    res.send(data.categories);
  });
  
  app.get("/api/headphones", (req, res) =&gt; {
    res.send(data.headphones);
  });
  
  app.get("/all", (req, res) =&gt; {
    res.send(data);
  });
  const port = process.env.PORT || 5000;
  app.listen(port, () =&gt; {
    console.log(`Serve at http://localhost:${port}`);
  });</code></pre>
  </div>
  </div>
  
  package.json for the backend:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "project-2-current",
    "type": "module",
    "engines": {
      "node": "16.13.0",
      "npm": "8.1.3"
    },
    "version": "1.0.0",
    "description": "E-com audio website",
    "main": "index.js",
    "scripts": {
      "start": "nodemon --watch backend --exec node --experimental-modules backend_server/server.js",
      "build": "cd app &amp;&amp; npm install &amp;&amp; npm run build"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "express": "^4.17.2",
      "nodemon": "^2.0.15"
    }
  }</code></pre>
  </div>
  </div>
  
  package.json for the frontend</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "my-project",
    "proxy": "http://127.0.0.1:5000",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@testing-library/jest-dom": "^5.16.1",
      "@testing-library/react": "^12.1.2",
      "@testing-library/user-event": "^13.5.0",
      "axios": "^0.24.0",
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "react-icons": "^4.3.1",
      "react-redux": "^7.2.6",
      "react-router-dom": "^6.1.1",
      "react-scripts": "5.0.0-next.60",
      "redux": "^4.1.2",
      "redux-thunk": "^2.4.1",
      "web-vitals": "^2.1.2"
    },
    "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": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    },
    "devDependencies": {
      "autoprefixer": "^10.4.0",
      "postcss": "^8.4.5",
      "tailwindcss": "^3.0.2"
    }
  }</code></pre>
  </div>
  </div>
  
  Procfile</p>
  <pre><code>web: node --experimental-modules backend_server/server.js
  </code></pre>
  <p>this is the full repo on github: <a href="https://github.com/elabdelaziz/Audiophile-Ecom" rel="nofollow noreferrer">https://github.com/elabdelaziz/Audiophile-Ecom</a></p>