/nextjs-hasura-fullstack

A boilerplate which combine Next.js and Hasura to quickly develop applications

Primary LanguageTypeScriptMIT LicenseMIT

(Unmaintained status - Take it as a learning resource)

Logo

A fullstack boilerplate which uses Hasura GraphQL Engine and Next.js to develop applications.

Twitter: Son Do Hong

Content

TechStack Features

This boilerplate is built using the following technologies:

  1. NextJs (The React Framework for Production)
  2. Hasura (GraphQL engine: supports GraphQL Query, Mutation and Subscription out of the box.)
  3. GraphQL (Flexible query language for API layer ~~ REST alternative)
  4. NextAuth (Authentication for NextJs power by NextJs API Routes)
  5. Apollo Client (Comprehensive Graphql Client - Automatically update the UI while fetching, caching, and updating the application state.)
  6. GraphQL Code Generator (Generate react hooks with fully typescript for all your graphql query)
  7. Tailwindcss (A utility-first CSS framework)
  8. Retail UI (UI libary power by tailwindcss)
  9. Typescript (Typed JavaScript at Any Scale)

Requirements

  1. Node.js Recommended Install via nvm
  2. npm Yeah! for npm install -g yarn
  3. Docker and Docker Compose
  4. Hasura CLI

Development Step

1. Clone the application

git clone https://github.com/sondh0127/nextjs-hasura-fullstack

2. Run a generateKeys.js (present in root directory)

node generateKeys.js

It will create hasura/.env and nextjs/.env files which used to provide authentication and security for the app

AUTH_PRIVATE_KEY  # Private key
HASURA_GRAPHQL_JWT_SECRET  # Public key
HASURA_GRAPHQL_ADMIN_SECRET # Hasura console password

For Backend:

3. Start Hasura GraphQL server with docker-compose

Starting Docker by using docker-compose which will start our backend app and database services.

cd hasura/
docker-compose up

If everything goes well, it’ll be up and running on http://localhost:8080/v1/graphql.

4. Start Hasura console

The console will help us automatically create migration and metadata for any change. Readmore

Require Hasura CLI

Open console on another terminal

cd hasura/
hasura console --admin-secret <HASURA_GRAPHQL_ADMIN_SECRET>

The console is running on http://localhost:9695.

For Frontend:

5. Open another terminal and install dependencies for NextJs application

cd nextjs/ && yarn

6. Create Google client credentials

Create a new Google OAuth Client and copy the credentials (Client ID and Client Secret) into .env file.

GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

Config Authorised redirect URIs:

http://localhost:3000/api/auth/callback/google
https://domailname.app/api/auth/callback/google

7. Start the NextJs application

yarn dev

The above command will start the application on http://localhost:3000/. It also watching for the change of your GraphQL to generate new code by GraphQL Code Generator

Deployment

The production ready can be done with Vercel and Heroku platforms by following the instruction. (Free hosting)

Heroku for Hasura application

To deploy the backend application on Heroku press the button below. You must register for a free Heroku account.

Deploy to Heroku

Hasura Config:

From heroku dashboard: Go to Settings => [Config Vars] Choose Reveal Config Vars => Add the following config

HASURA_GRAPHQL_ADMIN_SECRET="secret@123"

HASURA_GRAPHQL_JWT_SECRET: ''

Calm! You just need to wait Heroku to update config for a while

Get postgres database url at heroku

From heroku dashboard: Go to Resources => Heroku postgres addons. In new windows: Settings => View Credentials... Copy your DATABASE_URL from URI field with sample format: postgres://postgres:@localhost:5432/postgres

`

Vercel for NextJs 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

NextJs Config (Similar with.env)

Example: With your domain is domainname.herokuapp.com

Get your DATABASE_URL

NEXT_PUBLIC_API_URL=https://domainname.herokuapp.com/v1/graphql

NEXT_PUBLIC_WS_URL=wss://domainname.herokuapp.com/v1/graphql

DATABASE_URL=postgres://postgres:@localhost:5432/postgres

NEXTAUTH_URL=http://localhost:3000

GOOGLE_CLIENT_ID=""

GOOGLE_CLIENT_SECRET=""

AUTH_PRIVATE_KEY=""

Migration flow from development to production.

Prerequisites:

Open console:

hasura console --admin-secret <HASURA_GRAPHQL_ADMIN_SECRET>

Run migration with metadata:

hasura migrate apply --endpoint <YOUR_HASURA_APP_ENDPOINT> --admin-secret <HASURA_GRAPHQL_ADMIN_SECRET>

hasura metadata apply --endpoint <YOUR_HASURA_APP_ENDPOINT> --admin-secret <HASURA_GRAPHQL_ADMIN_SECRET>

Example:

hasura migrate apply --endpoint https://nextjs-hasura-fullstack-trello.herokuapp.com --admin-secret secret@123

hasura metadata apply --endpoint https://nextjs-hasura-fullstack-trello.herokuapp.com --admin-secret secret@123

Custom logic with NextJs API route (serverless)

TODO

heroku login heroku container:login heroku container:push web -a appname heroku container:release web -a appname heroku open

vercel

License

This project is licensed under the MIT License.