title: Deploying React, Express project to Heroku
body: <p>I have created a small React Express app and am struggling with deploying it to Heroku.
  So far I have organised the client and server into separate folders.</p>
  <p>Previously I had the contents of server in the projects root and client as its own folder accessed with a <code>path.join</code> however this didn't serve any of the build files so I opted to separate the folders.</p>
  <p>Now with two folders I use a root <code>package.json</code> to install all dependencies and get both sides running.</p>
  <pre><code>{
    &quot;name&quot;: &quot;project&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;main&quot;: &quot;&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;npm start --prefix server&quot;,
      &quot;install-client&quot;: &quot;cd client &amp;&amp; npm install &amp;&amp; npm run build &amp;&amp; cd ..&quot;,
      &quot;install-server&quot;: &quot;cd server &amp;&amp; npm install &amp;&amp; cd .. &quot;,
      &quot;heroku-postbuild&quot;: &quot;npm run install-client &amp;&amp; npm run install-server&quot;
    }
  }
  
  </code></pre>
  <p>This works with my other folders in serving the back-end however there is no front-end at all. I'm wondering if there is a solution to this problem specifically or even a better way to deploy a full stack project in the same dyno.</p>
  <p>This is my currently result on my Heroku app:</p>
  <p><a href="https://i.stack.imgur.com/DXxjv.png" rel="nofollow noreferrer">Heroku app result</a></p>
  <p>And here any additional relevant files:</p>
  <p>Main server file</p>
  <pre><code>const express = require('express');
  const path = require('path');
  const cors = require('cors');
  const db = require('./config/db');
  
  const app = express();
  const PORT = process.env.PORT || 8080;
  
  //Dependencies
  app.use(express.json());
  app.use(cors());
  
  //Select all rows from table
  app.get('/api/get', (req, res) =&gt; {
      const selectAll = 'SELECT * FROM plant_data';
  
      db.query(selectAll, (err, rows) =&gt; {
          if (err) throw err;
          res.send(rows);
      });
  });
  
  //Insert into database
  app.post('/api/insert', (req, res) =&gt; {
      const row = req.body.row;
      const insert = &quot;INSERT INTO plant_data (test) VALUES (?)&quot;;
  
      db.query(insert, [row], (err, rows) =&gt; {
          if (err) throw err;
          console.log(&quot;inserted: &quot; + row);
      });
  });
  
  //Server port
  app.listen(process.env.PORT || PORT, () =&gt; {
      console.log('Server started on port ' + PORT);
  });
  </code></pre>
  <p>Main client file</p>
  <pre><code>import React, {useState, useEffect} from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  export default function Index() {
      const [data, setData] = useState('');
      const [rows, setRows] = useState([]);
  
      useEffect(() =&gt; {
          axios.get('/api/get')
              .then(res =&gt; {
                  setRows(res.data);
              }).catch(err =&gt; {
              console.log(err);
          });
      });
  
      //Connects front-end submit to backend db
      const insertRow = () =&gt; {
          axios.post('/api/insert', {
              row: data
          });
      };
  
      return (
          &lt;&gt;
              &lt;h1&gt;Body&lt;/h1&gt;
              &lt;input type=&quot;text&quot; onChange={(e) =&gt; {
                  setData(e.target.value);
              }} /&gt;
  
              &lt;button onClick={insertRow}&gt;Submit&lt;/button&gt;
  
              {rows.map((row) =&gt; {
                  return &lt;p&gt;{row.test}&lt;/p&gt;
              })}
          &lt;/&gt;
      );
  };
  </code></pre>
  <p>Server package file:</p>
  <pre><code>{
    &quot;name&quot;: &quot;server&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;app.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;node server.js&quot;,
      &quot;dev&quot;: &quot;nodemon server.js&quot;,
      &quot;heroku-postbuild&quot;: &quot;npm install --prefix client &amp;&amp; npm run build --prefix client&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;body-parser&quot;: &quot;^1.20.0&quot;,
      &quot;cors&quot;: &quot;^2.8.5&quot;,
      &quot;express&quot;: &quot;^4.18.1&quot;,
      &quot;mysql&quot;: &quot;^2.18.1&quot;,
      &quot;nodemon&quot;: &quot;^2.0.19&quot;
    }
  }
  
  </code></pre>
  <p>Client package file:</p>
  <pre><code>{
    &quot;name&quot;: &quot;client&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@emotion/react&quot;: &quot;^11.8.2&quot;,
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;@mui/material&quot;: &quot;^5.5.3&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.2&quot;,
      &quot;@testing-library/react&quot;: &quot;^12.1.4&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;axios&quot;: &quot;^0.27.2&quot;,
      &quot;hamburger-react&quot;: &quot;^2.4.1&quot;,
      &quot;node-sass&quot;: &quot;^7.0.1&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-helmet&quot;: &quot;^6.1.0&quot;,
      &quot;react-router-dom&quot;: &quot;^6.2.2&quot;,
      &quot;react-scripts&quot;: &quot;5.0.0&quot;,
      &quot;styled-components&quot;: &quot;^5.3.5&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  
  </code></pre>