How to refer to specific dir. inside a different resource of the app ?

Hi there,

In a DigitalOcean App Platform environment, each application component (like your Node.js server and React frontend) is deployed as a separate service container. Due to the isolated nature of these services, they do not share a filesystem.

This means you cannot directly reference the build directory of your React app from your Node.js server as you would in a single-repository setup like on Heroku.

Here are a few approaches to handle this situation:

1. Serve the React App as a Static Site

Deploy your React application as a separate static site within the same DigitalOcean App Platform project. This can be done by:

• Building your React app: Generate the production build of your React app (npm run build or yarn build).
• Creating a Static Site: In the DigitalOcean App Platform, add a new static site component and point it to the repository of your React app.
• Routing: Configure routing so that your Node.js server API and React frontend are accessible as needed (e.g., example.com for your frontend and api.example.com for your backend).

2. Use DigitalOcean Spaces

If you prefer to serve the static files directly from your Node.js server:

• Upload the Build Artifacts: Use DigitalOcean Spaces, an object storage service, to store your React app’s build artifacts.
• Serve Static Files in Node.js: Modify your Node.js server to fetch the static files from Spaces and serve them. You can use the Spaces CDN endpoint to efficiently serve your static files.

3. Use Docker and Multi-Stage Builds

If you’re familiar with Docker, you can create a Dockerfile for your Node.js server that also builds your React application. This is a bit more complex but keeps everything in a single container:

• Multi-Stage Build: In your Dockerfile, have one stage build the React app (npm run build), and another stage set up your Node.js server.
• Copy Build Artifacts: Copy the build artifacts from the React build stage to the server stage, placing them in a directory served by your Node.js application.

Example Dockerfile (for approach 3):

# Build stage for React
FROM node:14 AS react-build
WORKDIR /app
COPY react-app/ .  # Adjust with the path to your React app
RUN npm install
RUN npm run build

# Node.js server setup
FROM node:14
WORKDIR /server
COPY server/ .  # Adjust with the path to your Node.js server
RUN npm install
# Copy built React app
COPY --from=react-build /app/build /server/public

EXPOSE 3000
CMD ["npm", "start"]

In your Node.js server, configure it to serve the files from the /server/public directory (or whatever directory you choose).

Hope that this helps!

Best,

Bobby