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.

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

What is...

Hasura

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

PostgreSQL

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.

Angular

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

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

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.

Tutorial

Before you begin, this page assumes the following:

• You host your code on Github, Gitlab or Bitbucket
• You have signed up to Qovery

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.

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

Angular

GraphQL client

Before you begin, this page assumes the following:

• You have installed the angular CLI

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:

src/app/graphql.module.ts

//...
const uri = "https://api.tld.com";
//...

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.

Deploy your application

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



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

How was it? Did this tutorial work?  Yes  No

Demo

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.

Wrapping-up

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

Resources

• Angular
• Hasura
• PostgreSQL
• Angular - Material Design

Tutorial