Nextjs Hasura Boilerplate Backe

by ghoshnirmalya

GitHub Readme.md

Logo

Twitter: Nirmalya Ghosh

This 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. urql
  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/.

Home page before login

To create a new user, we’ll have to Sign Up using Google. NextAuth is being used to help us in authentication.

Home page after login

2. 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 https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate

2. Install necessary dependencies for the frontend application

cd frontend && yarn install

3. Create a .env file and copy the contents from .env.example (present in frontend directory)

4. Generate the RSA keys

openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -pubout > public.pem

5. Print the keys in the escaped format

awk -v ORS='\\n' '1' private.pem

6. Copy the value of the key into the AUTH_PRIVATE_KEY key (in the .env file)

7. Start the frontend application

From the frontend directory, we can run the following command to start our Next.js frontend application:

yarn start

The above command will start the frontend application on http://localhost:3000/.

The backend package doesn’t do anything after we execute the above command.

8. Go inside the directory of the backend package on another terminal window

cd packages/backend

9. Start docker-compose

docker-compose up

We need to start Docker and then run the above command which will change the current directory to the backend package’s directory and then start the backend package. If everything goes well, it’ll be up and running on http://localhost:8080/v1/graphql.

Deployment

Frontend application

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

Deploy with Vercel

Backend application

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

Deploy to Heroku

Other interesting repositories

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

License

This project is licensed under the MIT License.