ghoshnirmalya/nextjs-hasura-boilerplate

As the name suggests, Hasura Next.js Boilerplate is a boilerplate for building applications using Hasura and Next.js. This boilerplate will let you up and running with a Next.js front-end and Hasura back-end application easily.

Motivation

A special mention to this boilerplate which helped in simplifying a lot of code generation.

Features

This boilerplate is built on top of Next.js and Hasura. So, you get all the benefits and features that these two softwares provide. However, the following features are the most important ones:

1. Automatic compilation and bundling of Next.js which ensures optimized code during production builds.
2. Pre-rendering of pages at build time (SSG) or request time (SSR).
3. Support for TypeScript.
4. File-system routing which helps in adding new routes to your application.
5. Support for optimized images out of the box.
6. Instant real-time GraphQL APIs.
7. Built-in authorization and authentication.

Getting Started

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

• Frontend: Next.js application
• Backend: Dockerized Hasura application

Overview

This boilerplate is built using the following technologies:

• Chakra UI
• Emotion
• GraphQL
• Apollo
• NextAuth
• TypeScript

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

Requirements

• Node.js
• npm
• Docker

Packages

• 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.

• 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 [email protected]:ghoshnirmalya/nextjs-hasura-boilerplate.git

2. Run the bootstrap script by running the following command from the root of your project:

   cd nextjs-hasura-boilerplate && yarn bootstrap

3. 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.

4. 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/.

Deployment

Click on the button below to deploy the frontend application on Vercel. You'll need to sign up for a free Vercel account.

Click on the button below to deploy the backend application on Heroku. You'll need to sign up for a free Heroku account.

Other interesting repositories

1. Hasura Next.js Trello clone
2. React Search Box
3. LinkedIn Clone using Create React App

License

This project is licensed under the MIT License.