Deploying backend and frontend apps

How to deploy backend and frontend apps with Qovery

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.

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.

    Examplary Node.js code snippet:

    const axios = require('axios');
    const secondAppAddress = "http://" + process.env.QOVERY_FIRSTAPP_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, use the built-in environment variables following this naming pattern:

    QOVERY_YOUR_APP_NAME_HOST where YOUR_APP_NAME is your application name.

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:

    Microservices

    And declare a port of your server:

    Microservices

    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
    })