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

Question

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.

Bobby · Answer

Hi there,

Deploying an Express server with a React frontend on the DigitalOcean App Platform requires a slightly different approach compared to Heroku, mainly due to the way build and run commands are handled. Your setup and scripts are mostly correct, but let’s ensure everything is optimized for DigitalOcean’s App Platform.

Key Steps to Adjust

Ensure Build Script is Correct: Your heroku-postbuild script seems fine, but you might want to rename it to something more generic since you’re not deploying to Heroku. For example, build could be more appropriate. This script should build both your backend and frontend.
Serve the React App Correctly: Your method of serving the React app with Express using express.static(path.join(__dirname, 'client/build')) is correct. Ensure that your Express app serves the index.html file for routes not handled by the server. This can usually be done with a catch-all route handler after your API routes:
```
app.use(express.static(path.join(__dirname, 'client/build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
```
Adjusting Build and Run Commands for DigitalOcean: For DigitalOcean App Platform, you can specify custom build and run commands. Given your setup, your build command is good, but ensure it reflects any script name changes (if you rename heroku-postbuild to build, for example). The run command should remain npm start, which is correct.
Check Environment Variables: Ensure that all necessary environment variables are set in the DigitalOcean App Platform settings, especially if your React app requires any for API URLs or other configurations.
Debugging Build and Runtime Issues: If the build succeeds but the React app isn’t served, check the deployment logs in the DigitalOcean App Platform dashboard. The logs can provide insights into what might be going wrong.
Ensure Client Routing Works: If you’re using React Router or similar client-side routing, the catch-all route in your Express server ensures that the React app can handle routing. The server serves the index.html file, and React Router takes over routing on the client side.

Example `package.json` Scripts

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

Deployment Configuration

Build Command: npm run build (or whatever your build script is named)
Run Command: npm start

If you’ve followed these steps and still face issues, it might be helpful to directly check the contents of the client/build directory after the build step completes to ensure that the React app is correctly built. Sometimes, path issues or missing files could be the culprit.

Best,

Bobby