App Spec for Node + React in Single App

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

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: /