Question

Deploying express server with react frontend not running the frontend using 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

This textbox defaults to using Markdown to format your answer.

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

Sign In or Sign Up to Answer