nextjs-opinionated/nextjs-opinionated-hasura

Next.js boilerplate with: typescript, next.js, tailwindcss, storybook, jest, eslint, prettifier, react hook form, zod, react-query AND hasura, postgreslq, graphql-code-generator

nextjs-opinionated-hasura

- demo

- storybook

extends nextjs-opinionated (demo) - base template, without Hasura and Auth0

---

This template includes

• everything from nextjs-opinionated
• hasura
• graphql-request
• graphql-codegen
• docker-compose
• react-hook-form
• @tailwindcss/forms
• zod

---

Pre-Requirements

• Install node (min 14): https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04

• Install and configure docker. Make sure you can run docker command without sudo (Step 2): https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-20-04

• Install and configure docker-compose: https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-compose-on-ubuntu-20-04

• Install hasura cli: https://hasura.io/docs/1.0/graphql/core/hasura-cli/install-hasura-cli.html#install-hasura-cli

Before yarn dev

yarn

# create .env.local
cp .env.local.example .env.local

# start your postgress if you have docker
yarn hasuraLocal

# apply DB in other terminal
yarn migrationLocalApply

Go to http://localhost:9696, use admin_secret_local_zzz as admin secret. You must see messages, tags and message_tag tables

---

Run on local database (with docker)

yarn dev

---

Run on remote database - heroku (without docker)

• first create a server using heroku button

yarn devNext

start server

# start docker-compose, generator and next.js
yarn dev

---

FREE Deploy on Heroku and Vercel

• Install Heroku CLI: https://devcenter.heroku.com/articles/heroku-cli#download-and-install

• Install Vercel CLI: https://vercel.com/cli

• Push your repo to github and deploy to your vercel account

• run vercel link on your project folder

• Deploy to heroku with the heroku button (https://heroku.com/deploy?template=https://github.com/hasura/graphql-engine-heroku)

• run heroku login

• cp .env.production.sh.example .env.production.sh

• update HASURA_ADMIN_SECRET, NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT, HASURA_GRAPHQL_ADMIN_SECRET at .env.production.sh - search/replace for xxx

---

how to use

Just fork and run:

# npm install
yarn install

# next.js site
yarn dev

# storybook site
yarn storybook

# tests
yarn test --watch

---

configure Auth0

• https://github.com/auth0/nextjs-auth0

---

always updated

I'm keeping in sync with nextjs-opinionated base template

# merge
git pull git@github.com:semantix-engagement-hub/nextjs-opinionated.git main

I'm always updating all packages here

# yarn global add npm-check-updates
ncu -u
yarn

tests everything's still works:

yarn checkAll

If everything is working, please make a pull request

---

based on https://github.com/elitizon/nextjs-tailwind-storybook