Tutorial & boilerplate setup

For this tutorial, the GraphQL backend and the basic app UI is already ready. Our task will be to convert the "static" UI into a working realtime app.

Clone and run the boilerplate

  1. Clone the learn-graphql repo. Execute the following commands in your terminal:
# make sure git version is >= v2.26
git clone --filter=blob:none --sparse git@github.com:hasura/learn-graphql.git
cd learn-graphql
git sparse-checkout init --cone
git sparse-checkout add tutorials/frontend/reason-react-apollo/app-boilerplate
  1. Navigate to the app-boilerplate directory.
cd tutorials/frontend/reason-react-apollo/app-boilerplate
  1. Run the following commands:

    • npm install to install the dependencies
    • npm start to compile the .re files to .bs.js files watch the source code for changes
    • In a new shell, run npm run webpack to bundle the .bs.js files
    • In another new shell, serve the build folder to serve the single page app (npm install -g serve && serve -s -p 3000 build)
    • Try opening your app at http://localhost:3000
  2. Signup/login as a user to load the todo app page

This is what you should see after the steps above:

Boilerplate after login

Load GraphiQL to play with your GraphQL APIs

  1. Head to https://hasura.io/learn/graphql/graphiql
  2. Log in (so that you can test the GraphQL APIs with a valid user token)

This is what you should see after the steps above:

GraphiQL after login

GraphQL Endpoint

We are going to make use of https://hasura.io/learn/graphql endpoint for making our GraphQL requests in the tutorial.

Now, if you want to run your own version of the above GraphQL endpoint, you can do so by following the Hasura Backend tutorial

  • Deploy Hasura Cloud
  • Set up Hasura Backend

Head to Hasura Backend Tutorial and get started with creating your own version.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin