Your project grows, and you need multiple backend applications to meet your needs? Are you building a fullstack application with backend, frontend, databases or other services? In this guide, you will learn how to set up multiple applications projects with Qovery.

Before you begin, this page assumes the following:

• You have already deployed an application with Qovery

What differentiates Qovery from most other similar platforms is its first-class support of microservices. At Qovery, your project can be easily composed of multiple applications. It's up to you to decide how to build your system, but Qovery enables you to easily and safely communicate between your backend applications, databases, and frontend websites.

Communicate backend applications

If your backend is made out of more than one application, very often, they will need to communicate with each other. The following steps will show you how to set up backend microservices communication at Qovery:

1. This guide assumes your applications are deployed. If you don't know how to deploy your app, check our guide.

2. Assuming you have two backend applications:

   • firstapp
   • secondapp

   You can send requests from one application to another using values injected automatically by Qovery into your environment variables (called Built_in). For this example, let's assume that the internal host of the backend application is QOVERY_APPLICATION_ZBACKENDID_HOST_INTERNAL. We will define an alias for this built_in environment variable called BACKED_HOST, in this way we won't have to change our code if we deploy the same application on another environment (it will be "back-end_id indipendent"),

   Examplary Node.js code snippet:

   const axios = require('axios');
   const secondAppAddress = "http://" + process.env.BACKED_HOST
   
   axios.get(secondAppAddress + '/api/users')
     .then(response => {
       console.log(response.data);
     })
     .catch(error => {
       console.log(error);
     });

   As you can see in the example, you can communicate with your second application using Qovery-injected built-in environment variable. The second application does not have to be publicly accessible - your applications communicate safely inside the internal network.

   To target another application in your environment, you can modify the alias BACKED_HOST and make it point to the _HOST built_in variable of the other application.

How was it? Did this tutorial work?  Yes  No

Consume your API in your frondend application

Qovery allows you to host your backend applications, databases, but also frontend apps like React/Angular/Vue SPAs or server-side rendered UIs. The following steps will show you how to consume your API in your frontend application.

1. Deploy your frontend application. If you don't know how to do it, you can take a look at the guide how to delpoy Nuxt.js application.

2. Expose your backend API.

   To be able to consume your API from your frontend application, your backend API needs to be exposed publicly. To do so, navigate to your backend application settings:

   

   And declare a port of your server:

   

   By default declaring a port exposes your app to public access (you can change it in port's advanced settings).

3. Setup API address in your frontend application.

   After exposing your application, you can get it's address in your frontend application using process.env as follows (Nuxt.js example):

   export default {
     env: {
       apiUrl: process.env.QOVERY_YOUR_APP_NAME_URL || 'http://localhost:3000'
     }
   }

   Now, you can configure your HTTP client in the frontend application to target your backend API:

   import axios from 'axios'
   
   export default axios.create({
     baseURL: process.env.baseUrl
   })

How was it? Did this tutorial work?  Yes  No