next-react-query-tailwind

next-react-query-tailwind

This demo application is a small re-implementation of some GitHub pages / functionality built using their GraphQL API.

Netlify URL: https://next-react-query-tailwind.starter.dev

Table of Contents

• Overview
  • Featured Tech Stack
  • Included Tooling
  • Demo Application Libraries
• Getting Started
  • Downloading
  • Installation
  • Generated Files
• Configuration
  • Environment Variables
  • OAuth Setup
  • JWT Encryption Keys
• Development
• Deployment

Overview

Featured Tech Stack

• GraphQL
• Next.js
• React
• React Query
• React Router
• Tailwind CSS

Included Tooling

• Jest
• Storybook
• Mock Service Worker
• GraphQL Code Generator
• ESLint
• Prettier

Demo Application Libraries

• Next Auth
• GitHub GraphQL API

Getting Started

Downloading

Download or clone the starter.dev-showcases repository from https://github.com/thisdot/starter.dev-showcases

Git

git clone https://github.com/thisdot/starter.dev-showcases.git

GitHub CLI

gh repo clone thisdot/starter.dev-showcases

Installation

Open the project root directory in your terminal and navigate to the next-react-query-tailwind showcase. Run yarn to install the dependencies.

cd next-react-query-tailwind
yarn

Generated Files

The src/lib/graphql.ts file gets generated by graphql-code-generator when you run yarn codegen. This file includes types, queries, and mutations, and react-query specific hooks for interacting with the GitHub GraphQL API.

This gets run automatically before running yarn dev and yarn build.

yarn codegen

Configuration

Environment Variables

The repository comes with an .env.example file that includes all the environment variables that are required for the application to run.

• NEXT_PUBLIC_GRAPHQL_ENDPOINT - The url to the Next API function that proxies the applications GraphQL requests to the GitHub GraphQL API.
• NEXTAUTH_URL - The url for our application used by Next Auth
• GITHUB_GRAPHQL_ENDPOINT - The url to the GitHub GraphQL API
• GITHUB_CLIENT_ID & GITHUB_CLIENT_SECRET - The OAuth credentials for our application auth that need to be setup in GitHub
• JWT_SECRET & JWT_SIGNING_KEY & JWT_ENCRYPTION_KEY - These are generated keys used to encrypt the JWT that gets passed to our graphql proxy endpoint.

OAuth Setup

To use this app and authenticate with GitHub, we need to setup the OAuth credentials in GitHub.

• Navigation to the GitHub settings page.
• Click the Developer settings link in the sidebar.
• Click the OAuth Apps link in the sidebar.
• Click the New OAuth App button at the top right of the page.

Register a new OAuth application form details

• Application name - Enter a name for the application
• Homepage URL - Enter the url of the Next application. (If running locally http://localhost:3000 otherwise the url of the application on the interenet)
• Authorization callback URL - Enter the url of the applications oauth callback. (If running locally http://localhost:3000 otherwise the url of the Next application)

After registering your OAuth application, add the generated client id and secret to a .env file for the project.

GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx

JWT Encryption Keys

There is some pre generated encryption keys provided in the .env.example file but if you want to generate new ones this is for reference on how to do it. See: next-auth #484

JWT_SECRET

openssl rand -base64 32

JWT_SIGNING_KEY

npx node-jose-tools newkey -s 256 -t oct -a HS512

JWT_ENCRYPTION_KEY

npx node-jose-tools newkey -s 256 -t oct -a A256GCM

Development

Start the development server

yarn dev

Open your browser to http://localhost:3000

Live Demo

This demo app gets deployed to Netlify on changes to the main branch.

https://next-react-query-tailwind.starter.dev