How to deploy a full-stack application

with Hasura, Angular and Qovery

+

The perfect match 👌

What is                   ?

What is                   ?

  • A turn-key GraphQL API backend

  • Connectable to PostgreSQL

  • In just a few seconds

  • Extensible

What is                     ?

Github, Gitlab, Bitbucket

Developer

Qovery

AWS, GCP, Azure,...

What is                     ?

  • Container as a Service platform

  • To deploy containerized apps with Database

  • on AWS, GCP and Azure

  • In just a few seconds

+

=   Production-ready GraphQL API

full-stack app

+

=   Production-ready GraphQL API

full-stack app

+

DEPLOY                   AND POSTGRESQL

Deploy Hasura with PostgreSQL | Qovery

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

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

# Generate the .qovery.yml and the Dockerfile from the official Hasura template
$ qovery init -t hasura

# 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 the deployment progress in realtime | Qovery

$ qovery status

  BRANCH NAME  | STATUS  | ENDPOINTS           | APPLICATIONS | DATABASES
  master       | running | https://api.tld.com | hasura       | my-psql-db

  APPLICATION NAME | STATUS  | DATABASES
  hasura           | running | my-psql-db

  DATABASE NAME | STATUS  | TYPE       | VERSION | ENDPOINT | PORT     | USERNAME | PASSWORD | APPLICATIONS
  my-psql-db    | running | POSTGRESQL | 11      | <hidden> | <hidden> | <hidden> | <hidden> | hasura

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

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

Only three files to deploy | Qovery

.qovery.yml

Dockerfile


  HASURA_GRAPHQL_DATABASE_URL=$QOVERY_DATABASE_MY_POSTGRESQL_DATABASE_CONNECTION_URI

.env

Configure the GraphQL API | Hasura

DEPLOY

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...
        });
    }
    //...
}

Connect Angular to Hasura | Qovery

Query the Hasura backend

$ ng add apollo-angular

Add the

GraphQL JS client

# Open src/app/graphql.module.ts and change the value of the uri variable as follows:
const uri = "https://api.tld.com";

Setup the GraphQL server URL

Deploy Angular | Qovery

# move into my angular project
$ cd my-angular-frontend

# Generate the .qovery.yml and the Dockerfile from the official Hasura template
$ qovery init

# Git commit and push your code
$ git add .qovery.yml
$ git commit -m "update: add .qovery.yml"
$ git push -u origin master

# Your Angular application is live!

Check the deployment progress of the Angular app | Qovery

 
 
$ qovery status

  BRANCH NAME  | STATUS  | ENDPOINTS           | APPLICATIONS    | DATABASES
  master       | running | https://api.tld.com | hasura, angular | my-psql-db
               |         | https://tld.com     |                 |

  APPLICATION NAME | STATUS  | DATABASES
  hasura           | running | my-psql-db
  angular          | running |

  DATABASE NAME | STATUS  | TYPE       | VERSION | ENDPOINT | PORT     | USERNAME | PASSWORD | APPLICATIONS
  my-psql-db    | running | POSTGRESQL | 11      | <hidden> | <hidden> | <hidden> | <hidden> | hasura

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

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

Only two files to deploy | Qovery

.qovery.yml

Dockerfile

DEMO 👨‍💻

TO CONCLUDE 👨‍🏫

  • Hasura is the perfect solution to build a GraphQL API

  • Qovery supports full-stack (database included) application deployment with no effort

  • Hasura with Qovery is the fastest way to build a production GraphQL API

To conclude... | Qovery

TO GO FURTHER 🚀

Better teamwork with isolated environments | Qovery

  
  $ git checkout master

  $ git checkout -b staging
  $ git push -u origin staging
  # staging environment created

  $ git checkout -b feat_1
  $ git push -u origin feat_1
  # feat_1 environment created

  • Web Interface

  • Data cloning between environments

  • Self-hosted: Deploy on your own Cloud account

And much more... | Qovery

  • Ephemeral environment on PR

THANKS 👏

QUESTIONS?

e-mail: romaric@qovery.com
web: qovery.com
twitter: @rophilogene - @Qovery_

Hasura Con 2020 - Qovery

By Romaric Philogène

Made with Slides.com

Hasura Con 2020 - Qovery

  • 677

More from Romaric Philogène