Question

Deploying express server with react frontend not running the frontend using App platform

Posted August 12, 2021 95 views
Node.jsDeploymentReactDigitalOcean App Platform

I am deploying my app to digitalOcean using App Platfrom, My app structure as follow:

 client
       ├── /public
       ├── /src
       ├── package-lock.json
       └── package.json

 index.js // this theindex of the express server 
 routes
       └── api.js
 package-lock.json
 package.json

inside the client folder is where is the react app which the front end and the root folder is the express server. I have followed this tutorial on how to deploy express server that include react app and the main part is serving react files by express server by doing the following:

app.use(express.static(path.join(__dirname, 'client/build')));

which included in index.js file in root directory.

when i deployed the app to heroku everything was fine as react is been served and backend api working fine but i want to deploy it to digitalocean instead,so the important part is defining the scripts in packages.json in root directory which will looks like:

"scripts": {
  "start": "node index.js",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

in heroku, it automatically run these scripts during the deployment

but as in digitalocean when configure the app before deployment there is two options provided

Build Command
npm run heroku-postbuild

Run Command
npm start

as showing it asks me to specify build and run command so i put in the run command npm start which will run the start script "node index.js" and the build command will run "cd client && npm install && npm run build".

After deployment done when i check the url only the server index is running but not both the server and react frontend. I have been struggling in this for almost two days and I’m sure there is something I haven’t cover it yet. i will really appreciate any help.

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!