Deploy Angular apps with this Angular Yeoman + Postgres starter kit

AngularJS is a popular JavaScript MVW Framework used to develop frontend applications. Hasura JS SDK can be used with AngularJS to super-power your application with backend capabilities like authentication, data and file APIs.

This guide lays out the required information for you to kickstart developing your AngularJS application using Hasura backend APIs.

We have also made a AngularJS-Hasura starter-kit using Yeoman Generator for AngularJS which you can use to scaffold your application. This kit has complete working pages that demonstrates capabilities of Hasura APIs. You can refer to these to get started or even use this kit directly for your applications.

Including Hasura JS SDK

The Hasura JS SDK is available on GitHub. Add the following snippet to your app’s index.html.

This script will expose a global variable called hasura which is available in the window scope. For normal JS applications this would be enough. But, for AngularJS, relying on global variables is not recommended. We need to inject this object to the components that would require it. For that purpose, we wrap this object inside a AngularJS Factory and make it available as an AngularJS component.

In order to do this, we create a new component under the scope of the AngulaJS module. Create a file called hasura.js with the following content and add include it in index.html.

Note: This assumes that the SDK has already loaded. Hence, make sure that the snippet including SDK comes before this file.

Now, you can inject hasura into any AngularJS component, like controllers etc. Before we can use the SDK to make queries and execute other actions, the SDK has to be initialised with a Hasura project. This can be done in the AngularJS app’s run section. If you application is for logged in users only, you can also make that check in the same section.

Note: This step also assumes that you have a Hasura project ready. In case you don’t have one, please login to Hasura Dashboard and create a project.

Auth APIs

Signup/Register

Sample controller for using Signup API is given below. Complete working example can be seen at the AngularJS-Hasura quick start template.

Login

A sample controller for login using hasura would look like this. Complete working example can be seen at the AngularJS-Hasura quickstart template

Data APIs

In order to use Data APIs, you need to create tables and permission using Hasura Console. The example provided in quickstart is a ToDo app, where you can add todos and mark them as completed. You can also delete todos. The added advantage of using Hasura Data APIs is that you get instant JSON APIs to access and manipulate data along with easy to user permissions model where you can implement access controls.

• Create a new table called todo using Hasura Console, and add the following columns:
• id : Integer (auto-increment)
• title : Text
• user_id : Integer
• completed : Boolean
• Select id as the Primary Key
• Click Create
• Goto Permissions tab, click on ‘Add permissions for a new role’
• Select user from the dropdown
• Enter {"user_id": "REQ_USER_ID"} in all the Check and Filter fields
• Toggle All for Select section
• Tick completed on Update section
• Save changes

Note: Complete working example can be seen at the AngularJS-Hasura quickstart template.

Now, you can use the following APIs.

Select

In order to select all the todos that belongs to a user, you can execute the following query:

Insert

Create a new ToDo

Update

Toggle completed state of an existing ToDo

Delete

Delete a ToDo

File API

Upload

Download

Delete

Using the Quick-start Template

Step 1a: Get a Hasura Project

Sign up on Hasura Dashboard and get yourself a Hasura project. Creating a hasura project will give you a domain. Something like: project42.hasura-app.io You will also get an email with your admin credentials for your project console and your database (search for “hasura credentials” in your inbox if you’re having trouble finding the email).

Specifically, note your project name.

Step 1b: Install hasuractl

Install the hasura command line tool: hasuractl.

Once you’re done with that, login and setup hasuractl:

Make hasuractl talk to the specific project you created in Step 1a. (this was project42 in the example above)

Step 2: Initialise an AngularJS project with an app name

Run the following command to initialise an Angular app that can be instantly deployed:

Step 3: Add project name to the Hasura JS SDK

Edit the file app/src/scripts/app.js, and change the following line to use your project name.

Step 4: Use hasuractl to add your SSH key to the Hasura project

You can’t just start pushing code to a new hasura project without making sure that you are really you! hasuractl can push your SSH key to your hasura project cluster so that you can start pushing your code.

Step 5: git push and you’re done!

Hasura is a Postgres BaaS + Kubernetes PaaS to help you build and deploy backends super fast. Try it out at hasura.io

Originally published at docs.hasura.io.