Build and deploy fullstack react apps in minutes using Hasura!

March 20, 2018 0 Comments

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!

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.

Getting and deploying a sample react app in under 60 seconds

Where is my react code ?

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

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.

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 hasuraid , authtoken and hasuraroles 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.

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 userid of type Integer (this will the hasuraid 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 ( hasuraid 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:

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.

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

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 .

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!

Check out our react guide:

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

We have GraphQL support coming soon. Subscribe here to get notified!

Tag cloud