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:
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-backendConnect to your Qovery account:
# Github, Bitbucket, Gitlab seamless authentication$ qovery authOpening 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 hasuraFinally, 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
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.
application:name: hasuraproject: MyProjectNamedatabases:- type: postgresqlversion: 11name: my-psql-dbrouters:- name: maincustom_domains:- branch: masterdomain: api.tld.com- branch: devdomain: api-dev.tld.comroutes:- application_name: hasurapaths:- /*
The Dockerfile
file - to build and run Hasura from the Docker image provided by the Hasura Core team.
FROM hasura/graphql-engine:v1.2.2EXPOSE 8080
Finally, the .env
(dot env) file - to link Hasura to the database
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.
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
:
//...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 querythis.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 theDockerfile
files# move into my angular project$ cd my-angular-frontend# Generate the .qovery.yml$ qovery initThen, 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
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.
application:name: angularproject: MyProjectNamerouters:- name: frontendcustom_domains:- branch: masterdomain: tld.comroutes:- application_name: frontendpaths:- /*
### STAGE 1: Build ###FROM node:14.3-alpine AS buildWORKDIR /usr/src/appCOPY package.json package-lock.json ./RUN npm installCOPY . .RUN npm run build### STAGE 2: Run ###FROM nginx:1.19-alpineEXPOSE 80COPY --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