How to deploy a full-stack application composed of Hasura, PostgreSQL and Angular

State of the art full-stack application deployment with Qovery

In this article, I will show you how to deploy a full-stack application with Angular for the frontend, with Hasura and PostgreSQL for the backend. In the end, our application will be available within development and production environments, which makes it convenient to make code changes without putting down the production.

Full-stack application Hasura, Angular and PostgreSQL with Qovery

To show all of that, we will create a food application to find out the best Parisian restaurants.

What is...


Hasura is a Turnkey GraphQL API backend - Meaning, you don't need to write any code to have a ready GraphQL API. Hasura stores all the data into a PostgreSQL database. What's interesting, is that Hasura manages the database for you, all the setup is done automatically. Hasura is extensible and lets you integrate with your other applications, through a well-designed hook system (Actions/Events).

Hasura Graphic


PostgreSQL is one of the most famous open-source SQL database - very useful for storing application data efficiently. It will be used by Hasura behind the scene to store the data.


You may have already heard about Angular. It is one of the most popular JavaScript frameworks, that developers use to build dynamic websites. We will use it to display the raw data from our GraphQL API made with Hasura.


Qovery is a Container as a Service platform that helps developers deploy their applications in the Cloud in just a few seconds. Qovery is designed to deploy stateless and stateful applications - like databases, and storage. And all of this, on any Cloud providers; More specifically AWS (Amazon Web Services), GCP (Google Cloud Platform), and Azure (Microsoft Cloud).

Qovery integrated with gitlab, github and bitbucket. And integrated with the Cloud providers

Full-stack application

A full-stack application refers to multiple applications working all-together as a single one. From frontend (customer or user-facing) to the backend (the "behind-the-scenes" technology such as databases and internal architecture) and the software code that connects the two (middleware). In our case, our backend is Hasura, our database PostgreSQL and our frontend Angular. From the application user point of view, this is seen as a single application.


Hasura and PostgreSQL

Quick deployment

To deploy Hasura to Qovery, follow steps from this guide.

Hasura web interface

Once the Hasura application and the PostgreSQL database running, we can get access to the Hasura web interface to set-up our GraphQL API.

Hasura web interface to configure the data model

To open the application in your browser, click on Action and Open buttons in your application overview:

Open App


GraphQL client

Ok, now let's deploy our Angular application. We need to use a GraphQL client to connect to our server. We'll use Apollo by running in our shell:

$ ng add apollo-angular

Then, we link the client to our server by modifying the uri variable into src/app/graphql.module.ts:

const uri = "";

You can find the correct URL in Hasura application Environment Variable section (learn more about env variables).

Finally, we can now fetch data from our GraphQL backend with the following code:

import { Apollo } from "apollo-angular";
export class HomeComponent implements OnInit {
ngOnInit() {
const gquery = "..."; // graphql query
this.apollo.query<any>({query: gquery}).subscribe(({ data, loading }) => {
// response with the data...

Quick deployment

  1. Create a Github or Gitlab repository with the sample code

  2. Add a new application linked to your repository. If you don't know how to create a new app, check our guide.

  3. Deploy your application

    All you have to do now is to navigate to your application and click Deploy button

    Deploy App

    That's it. Watch the status and wait till the app is deployed.


Now, let's look at the final result...

Beyond application deployment

Application deployment is one part of what Qovery provides. Qovery helps development teams to better collaborate altogether by cloning environment and creating ephemeral environments on Pull Requests. Plus, deploying on its own Cloud account is available for business plans - and last, but not least, a web interface will be available very soon.


In this tutorial, we saw how to deploy a full-stack application composed of a frontend, backend, and a database. We saw how Qovery perfectly fits Hasura and make it publicly available in a couple of seconds. So join us on Qovery to deploy your next full-stack project :)