Projects

Documentation

Hasura Next.js Boilerplate is a boilerplate for building applications using Hasura and Next.js. This boilerplate consists of the following:

  1. Frontend: Next.js application
  2. Backend: Dockerized Hasura application

Overview

This boilerplate is built using the following technologies:

  1. Chakra UI
  2. Emotion
  3. GraphQL
  4. Apollo
  5. NextAuth
  6. TypeScript

It supports GraphQL Query, Mutation and Subscription out of the box.

Requirements

  1. Node.js
  2. npm
  3. Docker

Packages

  1. Frontend: Next.js application

This application is the primary user-facing application. Once it’s up and running (see Development section), it’s available on http://localhost:3000.

  1. Backend: Dockerized Hasura application

Hasura is an open source engine that connects to our databases & micro-services and auto-generates a production-ready GraphQL backend. It’s very easy to get Hasura up and running on our local system. All the migrations are set up in the migrations directory.

Installation

  1. Clone the application.
git clone git@github.com:ghoshnirmalya/nextjs-hasura-boilerplate.git
  1. Run the bootstrap script by running the following command from the root of your project:
cd nextjs-hasura-boilerplate && yarn bootstrap
  1. Create a Google OAuth Client from https://console.developers.google.com/apis/credentials/oauthclient and copy the credentials to GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in your .env file inside the frontend directory.

  2. Start Docker and run both the applications by running the following command from the root of your project:

yarn dev

We need to start Docker and then run the above command. The Hasura console will be available at http://localhost:8080/console. The Hasura GraphQL endpoint will be up and running on http://localhost:8080/v1/graphql. The Next.js application will be available at http://localhost:3000/.

Source code on Github

Copyright © 2021 Nirmalya Ghosh