Question

App Spec for Node + React in Single App

I have a node backend with a react frontend in separate github repos. I have successfully deployed the combo as two separate apps.

But it seems like I should be able to do this as a single app by setting up a service and static site in an app spec.

This seems like it should be a common need. Does anyone know how to make it work?

Submit an answer
Answer a question...

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.

Patrick Brannan • April 6, 2022

OK. The file below worked for me. The last problem was that I had not added my new app instance to the database pool allowed ip’s.

I’m using sequelize on the API server so there are a bunch of environment variables left out of the file below.

alerts:
- rule: DEPLOYMENT_FAILED
- rule: DOMAIN_FAILED
databases:
- cluster_name: [MY_DATABASE_CLUSTER]
  db_name: [NAME]
  db_user: [USER]
  engine: PG
  name: db-postgresql-NNN
  production: true
  version: "13"
name: app
region: nyc
services:
  - name: backend
    build_command: yarn install
    environment_slug: node-js
    github:
      branch: main
      repo: [MY_BACKEND_REPO]
    http_port: 8080
    instance_count: 2
    instance_size_slug: professional-xs
    name: [SERVICE_NAME]
    routes:
    - path: /api
    run_command: yarn serve
    source_dir: /
    envs:
    - key: NODE_ENV
      scope: RUN_AND_BUILD_TIME
      value: production
    - key: OTHER_KEY
      scope: RUN_AND_BUILD_TIME
      value: other_value
static_sites:
- build_command: yarn build
  catchall_document: index.html
  environment_slug: html
  envs:
  - key: MY_APP_SPECIFIC_KEY
    scope: BUILD_TIME
    value: my_app_specific_value
  - key: REACT_APP_API_HOST
    scope: BUILD_TIME
    value: ${APP_URL}
  github:
    branch: main
    deploy_on_push: true
    repo: [MY_FRONTEND_REPO]
  name: [static_site_name]
  routes:
  - path: /
  source_dir: /
Greg M
DigitalOcean Employee
DigitalOcean Employee badge
• April 6, 2022

Hello!

App Platform supports adding multiple components from different repositories.

Here is an example of a sample app with multiple components (although in the same repo):

Repo: https://github.com/digitalocean/sample-monorepo Spec: https://github.com/digitalocean/sample-monorepo/blob/main/.do/app.yaml

All you would need to do is have a static site with the Github source pointing to your react repository, and a service with the Github source pointing to the nodejs repository.

The one thing you’ll need to be sure to modify is the routes for your app. For example if you want the frontend to be the root, you’d probably want to make the backend something like /api/... etc.

Happy Coding!

Greg