Build and deploy fullstack react apps in minutes using Hasura!

Wouldn’t it be great if you could add authentication and a database to your react or react native app in a few minutes ? Moreover, imagine, deploying your react app to the cloud was as easy as pushing to a remote git repository.

Well, these are exactly the problems that Hasura solves. Hasura is a platform which gives you a backend and dev ops out-of-the-box.

This short blog post aims at showcasing the speed and power at which you can develop and deploy a fully functional react app using Hasura. We are going to be building a To-Do app from scratch with the following features:

  • Todo UI: A simple todo UI to add, complete and delete todos.
  • Authentication: Ability for users to login or signup into the app. This also involves having a UI that helps users authenticate themselves.
  • Database: Persist each user’s todo into a database so that it is accessible across sessions.
  • Public URL: This todo app should be accessible via a public URL served over HTTPS.

And all of this in just 20 minutes.

Let’s get started!

Getting started and deploying a react app to a public URL

Hasura provides ready made boilerplates that you can use to get started quickly. Deploying on Hasura is literally like pushing to a remote git repository.

Where is my react code ?

Let’s take a look at where the react app’s code is.

Adding a Todo Component to the app

Ok, we have a simple react app. We are now going to add some UI elements to the todo app. In the video below we are going to replace the App Component with a TodoComponent which has a basic UI to show an input box and a list of added todos.

Adding Authentication

Hasura provides out-of-the-box authentication APIs that you can use instantly in your apps. You are given an API Console as well as an API Explorer to play around with these APIs.

As you can see, every authenticated user has a hasura_id , auth_token and hasura_roles associated with them.

You can now build a UI for authentication and use these APIs to authenticate your user. Alternatively, you can also use Hasura’s Auth UI Kit and skip this whole Authentication UI building ordeal.

Adding a database to store our todos

Let’s create a table todo to store the todos from the users. The todo table will have the following columns, id of type Integer(auto increment), task of type Text, completed of type Boolean and user_id of type Integer (this will the hasura_id that we get after login to identify the user).

You can start creating tables from the Api Console by heading to the Data tab.

By default, every table created only has admin permissions. This means that only users with admin roles can perform any sort of operations on these tables. So let’s add permissions so that users with user role can insert , select , update and delete rows from this table.

As mentioned earlier, every table created on Hasura comes with instant Data APIs .

Let’s check out a simple insert query for the user we created above ( hasura_id has a value of 2).

Note: This insert works because the user’s auth_token is added as a Authorization header to the request.

Similarly, to select, update and delete rows:

Adding data APIs to the todo app

Another nifty feature of the API Console is the Code Generator which you can use to generate code in Javascript to make these API calls in your react app.

The Final App

Putting all of this together, this is what our final app will look like.

Extending your app: Adding custom APIs

You now have a fully functional todo app. But most apps are not todo apps, most modern apps require custom APIs that have to do more than just perform graph queries on tables.

We need custom APIs to handle these cases. The hello-react quickstart that we started with also has a simple nodejs express server running on the api subdomain.

Make changes like adding different routes and deploy with a simple git push .

What about React Native ?

We just built a backend and used that in our react app. The same can be used for a react native app as well. We have a neat react-native-auth-boilerplate too!

I want to know more, where do I start ?

Check out our react guide:

Hasura Hub - hasura/hello-react
Git push a react app to an HTTPS domain with no configuration. This project is a create-react-app boilerplate for…hasura.io

or if you are looking for something specific to react native:

Hasura Hub - hasura/hello-react-native
A Hasura starter project with a react-native application that uses Hasura BAAS features. It also has a ready to deploy…hasura.io

Hasura gives you instant GraphQL APIs over any Postgres database without having to write any backend code.



Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering web hooks on database changes.


Hasura

Hasura

The Hasura GraphQL Engine gives you realtime, high performance GraphQL on any Postgres app. Now supports event triggers for use with serverless.

Read More