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

I am building an app consists of 2 different resources

  1. Server App using “NestJs”
  2. Web App using “Create React App”

Each on his own different repository on GitHub.

Usually I used to refer to the web “build” dir. from inside the server to serve it as a static dir. using a code like this

path.join(__dirname, '..', '..', 'build')

as in “Heroku” for example

Now. How can I do the same on digitalocean ? How can i refer to the “build” dir. inside the Web app resource from inside the server resource as i don’t know the dir. structure of the app ?

This is my typical response I get

{"statusCode":404,"message":"ENOENT: no such file or directory, stat '/workspace/build/index.html'"}

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

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
Site Moderator badge
January 2, 2024

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., for your frontend and 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
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

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!



Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel