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

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

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, brokers 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.

Tutorial

Hasura and PostgreSQL

Quick deployment

  1. The first thing to do is to create a directory and move into it

    # create a directory and move into it
    $ mkdir my-hasura-backend && cd my-hasura-backend

    Connect to your Qovery account:

    # Github, Bitbucket, Gitlab seamless authentication
    $ qovery auth
    Opening your browser, waiting for your authentication...
    Authentication successful!

    Then, we need to generate the files required to make Hasura running on Qovery

    # Generate the .qovery.yml and the Dockerfile from the official Hasura template
    $ qovery init -t hasura
  2. Finally, we commit and push our changes to deploy Hasura with PostgreSQL (Yes PostgreSQL is handled by Qovery ;))

    # Git commit and push your code
    $ git add --all
    $ git commit -m "first commit"
    $ git push -u origin master
    # Your Hasura application is live!
  3. Check your deployment status with:

    $ qovery status

That's it, our Hasura backend and PostgreSQL are deployed and ready to be used.

Under the hood

The command qovery init -t hasura generates 3 mandatory files to deploy Hasura and PostgreSQL with the right configuration.

The .qovery.yml file - which is the description file indicating what dependencies your application needs to run. In our case a PostgreSQL database, but we also added two custom domains for the master and dev environments.

.qovery.yml
application:
name: hasura
project: MyProjectName
cloud_region: aws/us-east-2
databases:
- type: postgresql
version: 11
name: my-psql-db
routers:
- name: main
custom_domains:
- branch: master
domain: api.tld.com
- branch: dev
domain: api-dev.tld.com
routes:
- application_name: hasura
paths:
- /*

The Dockerfile file - to build and run Hasura from the Docker image provided by the Hasura Core team.

Dockerfile
FROM hasura/graphql-engine:v1.2.2
EXPOSE 8080

Finally, the .env (dot env) file - to link Hasura to the database

.env
HASURA_GRAPHQL_DATABASE_URL=$QOVERY_DATABASE_MY_POSTGRESQL_DATABASE_CONNECTION_URI

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

Angular

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:

src/app/graphql.module.ts
//...
const uri = "https://api.tld.com";
//...

You can find the correct URL to use by using qovery status - ENDPOINTS

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. Like we did for Hasura, we have to create the .qovery.yml and the Dockerfile files

    # move into my angular project
    $ cd my-angular-frontend
    # Generate the .qovery.yml
    $ qovery init
  2. Then, we commit and push our changes to deploy Angular

    # Git commit and push your code
    $ git add --all
    $ git commit -m "first commit"
    $ git push -u origin master
    # Your Angular application is live!
  3. Check your deployment status with:

    $ qovery status

Under the hood

Two files at the root of our project are mandatories to deploy our Angular application - the .qovery.yml and the Dockerfile files.

.qovery.yml
application:
name: angular
project: MyProjectName
cloud_region: aws/us-east-2
routers:
- name: frontend
custom_domains:
- branch: master
domain: tld.com
routes:
- application_name: frontend
paths:
- /*
Dockerfile
### STAGE 1: Build ###
FROM node:14.3-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
### STAGE 2: Run ###
FROM nginx:1.19-alpine
EXPOSE 80
COPY --from=build /usr/src/app/dist/my-angular-app /usr/share/nginx/html

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

Tutorial