Skip to content
A simple todo app build on react using the graphql queries of hasura
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Initial Commit Mar 22, 2018
conf
microservices Minor fixes Apr 16, 2018
migrations Updated permissions Apr 13, 2018
.gitignore
.hasuraignore
LICENSE Create LICENSE Mar 22, 2018
README.md Update README.md Mar 22, 2018
clusters.yaml Added cluster Apr 13, 2018
hasura.yaml
package-lock.json Minor fixes Apr 16, 2018
schema.graphql

README.md

react-apollo-todo-app

This is a basic todo app built on react. The app uses Hasura for its backend, leveraging the following features of Hasura:

  • Deploy the react app
  • Hasura Authentication the Auth UI Kit
  • Hasura Database
  • GraphQL queries provided by Hasura

Pre-requisites

  • Ensure that you have the HasuraCLI installed on your local machine.
  • Login into Hasura by running the following command on your command shell
hasura login

Quickstart

Getting the project

To get the project, run the following in your command shell:

hasura quickstart hasura/react-apollo-todo-app

Deploying the project

Deploying the project is equivalent to pushing to a remote git repo

cd react-apollo-todo-app
git add . && git commit -m "Initial commit"
git push hasura master

Opening the react app in your browser

After you are done deploying the project, you can open up the react app in your browser by:

hasura microservice open ui

React App Code

You can find the code for the react app in the microservices/ui/app directory.

Local Development

To run the app locally, you need to run the following inside the microservices/ui/app directory

REACT_APP_CLUSTER_NAME=<cluster-name> npm run start

Here, the REACT_APP_CLUSTER_NAME is the name of the cluster assigned to you when you quickstarted this project. To get the name of your cluster, run the following command inside the project directory:

hasura cluster status

This will print out the following output:

Cluster name:       blues54                       
Cluster alias:      hasura
Kubectl context:    blues54
Platform version:   v0.15.31
Cluster state:      Synced

blues54 is the name of the cluster in this case, you will have a different name.

Exploring Hasura Features

To explore the Hasura features and learn how to use them, checkout our 20 minute hello-react guide here.

You can’t perform that action at this time.