How to deploy Strapi backend and ReactJS frontend to a single Heroku app

Question

Is there any supported way how to deploy a Strapi backend and a ReactJS frontend into a single Heroku app?

I have successfully deployed the Strapi backend, but am complet

Answer 1

If somebody wants to know if Muhammad Ahmad's solution works - yes, it works.

Initially, I worked exclusively with the MERN stack and used two folders - one for the client, the other for the server. Only package.json was at the root. Everything worked fine on Heroku, so I didn't expect to find it difficult to switch the backend to Strapi...

Then I decided to try to replace the server side (Express) to Strapi. After that, there was a problem of deploying this whole case to Heroku and running it on single Heroku application.

So, the project structure is:

/root 
      - /client (React UI)
      - /server (Strapi)
      - package.json

In order to make the whole thing work together, it is necessary to amend a little change inside

./middlewares/serve-react/index.js:

 const staticDir = path.resolve(strapi.dir, clientBuildPath || strapi.config.paths.static);

where clientBuildPath is ../client/build.