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

Before you begin, this page assumes the following:

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

Hasura and PostgreSQL

Quick deployment

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!

With Qovery, you don't need to have a Cloud account to deploy on the Cloud provider and the region of your choice.

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

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!

Check your deployment status with:
```
$ qovery status
```

How was it? Did this tutorial work? Yes No

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

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

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

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!

Check your deployment status with:
```
$ qovery status
```

How was it? Did this tutorial work? Yes No

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:
    - /*

project is the matching key to get the Hasura, PostgreSQL and Angular within the same project.

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

#What is...

#Hasura

#PostgreSQL

#Angular

#Qovery

#Full-stack application

#Tutorial

#Hasura and PostgreSQL

#Quick deployment

#Under the hood

#Hasura web interface

#Angular

#GraphQL client

#Quick deployment

#Under the hood

#Demo

#Beyond application deployment

#Wrapping-up

What is...

Hasura

PostgreSQL

Angular

Qovery

Full-stack application

Tutorial

Hasura and PostgreSQL

Quick deployment

Under the hood

Hasura web interface

Angular

GraphQL client

Quick deployment

Under the hood

Demo

Beyond application deployment

Wrapping-up