​
Add a Backend

Our architect.yml can define multiple services, and our frontend application isn’t able to do much without a backend providing data.

You can add your own pre-existing backend service, or clone our Node Template to follow along.

Suppose we are now working with our frontend and backend in separate directories - note that our architect.yml is still in the react-frontend/ directory:

node-backend/
    src/
        index.js
    Dockerfile
    package.json
    package-lock.json
react-frontend/
    src/
        index.js
    Dockerfile
    package.json
    package-lock.json
    architect.yml

In react-frontend/architect.yml, we will add the following:

  • The api service under services
  • The api-interface under interfaces
name: react-node-app
description: A react + nodejs component

services:
  my-app:
    build:
      context: .
    interfaces:
      main:
        port: 8080
        ingress:
          subdomain: test
  api:
    build:
      context: ../node-backend
    interfaces:
      http:
        port: 3000
        ingress:
          subdomain: api

​
Define another service

In order for our component to deploy multiple services, we can add configuration a second service within the services section. For this example, the additional service is called api.

This api section has it’s own build context and set of interfaces:

build:
  context: ../node-backend
interfaces:
  http:
    port: 3000
    ingress:
      subdomain: api

We want to build our API from the node-backend directory, and can use the relative path ../node-backend to specify that. We also create an interface named http that will listen on port 3000.

​
Run locally

This can be run locally using the same command as before:

$ architect dev architect.yml

This time, both https://test.localhost.architect.sh and https://api.localhost.architect.sh will be available when the containers are started, and the frontend will be able to make requests to the backend.

​
Register a component to be deployed on the cloud

The updated version of the component can be registered as well:

architect register architect.yml

This will allow you to deploy the component on the Architect Cloud from https://cloud.architect.io, or via the command line utility architect deploy.

​
Next steps

At this point, the architect.yml can evolve in whatever way is necessary to fulfill the needs of your application. For example, it’s likely necessary for your API to have a database - that can be added as another service in the services section. You may need to pass environment variables to your services. Maybe your frontend and backend live in separate repo, and using dependencies can help you keep them decoupled.

The rest of the Architect documentation has more in-depth information about what architect.yml allows you do to.

Create a componentAPI security