Question

How to Deploy React frontend container with backend server container in App Platform correctly

Posted on April 14, 2024
Initial Server Setup React DigitalOcean App Platform Node.js Server Optimization Software Development Application Development Website Development App Platform
Asked by taymcl

For reference my github repository containing the frontend and server code is available at https://github.com/taymcl/PristineCleanVenturesLLC

I have a frontend container and another container that starts my server.js. The server is an Express application that listens for POST requests on the api/send-email endpoint and sends it as an email using Nodemailer. It seems that my server is started successfully according to build logs on digital ocean. When I attempt to send a POST request I get a 404 error ‘Failed to load resources’. I set my HTTP request route in the server container to /api/send-email, and set the HTTP port in the server container to 5000 as it is in my code. I just am not sure what the issue as I have tried various configurations on digital ocean and changes to my code. I have a feeling the solution is very simple and I just have lack in experience with deploying on digital ocean/configuring servers, or this is just not possible using App Platform. If I can provide any other information to help let me know.

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!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev

Site Moderator

• April 15, 2024

Accepted Answer

Hi there,

What you would usually do is to deploy two separate components to your App Platform:

1 static site component for your React frontend, as described here: https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform
1 web service component for your backend service
You can then set the route of backend service to /api or something else that matches your requirements

That way your static site will be accessible directly via your domain and it will be making all of the requests to the /api route which will be handled by your backend service.

Here is a quick video that shows how to deploy an API backend and a React Frontend:

In the video the backend is Laravel but in theory the setup should be the same for any other framework.

If you are still seeing the 404 errors, I could suggest checking the backend service logs to see if you see any problems there. And also trying to manually make the requests using curl or Postman for example to the /api endpoint.

Let me know how it goes!

Best,

Bobby