Architect.io Docs

Adding Additional Services

Adding 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: 8080
api:
build:
context: ../node-backend
interfaces:
http: 3000
interfaces:
my-interface:
url: ${{ services.my-app.interfaces.main.url }}
ingress:
subdomain: test
api-interface:
url: ${{ services.api.interfaces.http.url }}
ingress:
subdomain: api

Defining 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: 3000

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.

Defining Another Interface

In order for our API to be accessible externally, like from the frontend of our website, we've added the api-interface section to the interfaces section:

api-interface:
url: ${{ services.api.interfaces.http.url }}
ingress:
subdomain: api

This will look very similar to our frontend interface my-interface, but the URL exposed comes from services.api.interfaces.http.url and the subdomain for api-interface is api.

Running Locally

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

$ architect dev architect.yml

This time, both test.arc.localhost and api.arc.localhost will be available when the containers are started, and the frontend will be able to make requests to the backend.

Registering 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.

No results found for query ""