Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate

:art: Boilerplate for building applications using Hasura and Next.js
https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate

apollo-client boilerplate graphql hasura next react

Last synced: 4 days ago
JSON representation

:art: Boilerplate for building applications using Hasura and Next.js

Host: GitHub
URL: https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate
Owner: ghoshnirmalya
License: mit
Created: 2020-02-28T07:18:05.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2024-11-18T22:47:11.000Z (23 days ago)
Last Synced: 2024-12-03T18:58:19.879Z (9 days ago)
Topics: apollo-client, boilerplate, graphql, hasura, next, react
Language: TypeScript
Homepage:
Size: 5.84 MB
Stars: 294
Watchers: 4
Forks: 53
Open Issues: 6
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license.md

Awesome Lists containing this project

my-awesome-list - nextjs-hasura-boilerplate
Awesome-NextJs - nextjs-hasura-boilerplate - [demo](https://nextjs-hasura-boilerplate.vercel.app/) - `Boilerplate for building applications using Hasura and Next.js` (Nextjs Starter)

README

        


  





  

    

  



As the name suggests, [**Hasura Next.js Boilerplate**](https://github.com/ghoshnirmalya/nextjs-hasura-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](https://github.com/sondh0127/nextjs-hasura-fullstack) which helped in simplifying a lot of code generation.

## Features

This boilerplate is built on top of [Next.js](http://nextjs.org/) and [Hasura](https://hasura.io/). 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**](https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate) is a boilerplate for building applications using Hasura and Next.js. This boilerplate consists of the following:

- [**Frontend**](https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate/tree/master/frontend): Next.js application

- [**Backend**](https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate/tree/master/backend): Dockerized Hasura application

## Overview

This boilerplate is built using the following technologies:

- [Chakra UI](https://chakra-ui.com/)

- [Emotion](https://emotion.sh/)

- [GraphQL](https://graphql.org/)

- [Apollo](https://www.apollographql.com/)

- [NextAuth](https://next-auth.js.org/)

- [TypeScript](https://www.typescriptlang.org/)

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

## Requirements

- [Node.js - ^12.19.0 || ^14.15.0 || ^16.13.0](https://nodejs.org/)

- [npm](https://www.npmjs.com/)

- [Docker](https://www.docker.com/)

## Packages

- [**Frontend**](https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate/tree/master/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](http://localhost:3000/).

- [**Backend**](https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate/tree/master/backend): Dockerized Hasura application

[Hasura](https://hasura.io/) 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](https://github.com/ghoshnirmalya/nextjs-hasura-trello-clone/tree/master/packages/backend/migrations) directory.

## Installation

1. Clone the application:

   ```bash

   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:

   ```bash

   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:

   ```bash

   yarn dev

   ```

We need to start Docker and then run the above command. The Hasura console will be available at [http://localhost:8080/console](http://localhost:8080/console). The Hasura GraphQL endpoint will be up and running on [http://localhost:8080/v1/graphql](http://localhost:8080/v1/graphql). The Next.js application will be available at [http://localhost:3000/](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](https://vercel.com/signup/).

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fghoshnirmalya%2Fnextjs-hasura-boilerplate%2Ftree%2Fmaster%2Ffrontend&env=NEXT_PUBLIC_API_URL,NEXT_PUBLIC_WS_URL,DATABASE_USERNAME,DATABASE_PASSWORD,DATABASE_HOST,DATABASE_NAME,AUTH_PRIVATE_KEY,NEXTAUTH_URL,GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET&project-name=nextjs-hasura-boilerplate&repo-name=nextjs-hasura-boilerplate)

Click on the button below to deploy the backend application on Heroku. You'll need to [sign up for a free Heroku account](https://signup.heroku.com/).

[![Deploy to

Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ghoshnirmalya/nextjs-hasura-boilerplate)

## Other interesting repositories

1. [Hasura Next.js Trello clone](https://github.com/ghoshnirmalya/nextjs-hasura-trello-clone)

2. [React Search Box](https://github.com/ghoshnirmalya/react-search-box)

3. [LinkedIn Clone using Create React App](https://github.com/ghoshnirmalya/linkedin-clone-react-frontend)

## License

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).