fullstack-graphql-app

An opinionated fullstack GraphQL monorepo Boilerplate using modern tech stack.

Concepts

🛡Type-safe

graphql-code-generator
prisma
ts-pattern (for type-safe error handling)
and I code in a type-safe way and don't choose a library that doesn't have a good TypeScript support.

🛠Customizable

envelop (plugin system for GraphQL)
urql (highty customizable GraphQL Client)

📈Simple but scalable

a bit flavor of clean architecture in backend.

Ever evolving

I constantly maintain this repository.
TypeScript, React, GraphQL are ever evolving world too.
In that sense, any tech stack might be replaced in the future.

Tech Stack

Common

TypeScript
Turborepo
pnpm
GraphQL
graphql-codegen

Backend

Prisma
fastify
envelop
graphql-yoga 2.0
graphiql
ts-pattern
mysql

Frontend

React
Next.js
urql
tailwindcss
radix ui
shadcn/ui
React Hook Form

Authentication

Auth0

Testing

testing-library
jest
msw

Getting Started

Setting up auth0

As this project uses auth0 for authentication, you need to setup auth0 to make everything work. If you don't have any auth0 account, then sign up and create account.

You need to create API, Application (Single Page Application) in the auth0 console. In Application, go to Application URIs section in the middle of the settings page and specify http://localhost:3000 to Allowed Callback URLs, Allowed Logout URLs, Allowed Web Origins, Allowed Origins (CORS).

Once you have set up API and Application, collect credentials below which will be used in your application:

Client Id: Your Auth0 application's Client ID. can be found on the Application setting page.
Domain: Your Auth0 application's Domain. can be found on the Application setting page.
Audience: API Identifier for an access token. can be found on the API setting page.

Add roles to a user using Rules

You can manage role-based authorization with auth0 Rules, which is a mechanism that allows us to run some code when user register an account on auth0.

To do so, got to the Auth0 dashboard and create a new Rule (which can be found in Auth Pipeline on the side menu). Then fill the field with example code (Note that you should specify your own audience to namespace e.g. const namespace = 'https://api.fullstack-graphql-app.com'). And finally name the rule whatever you like.

After attached the rule, auth0 now add role to the user after a user registered the account on auth0.

const { loginWithRedirect } = useAuth0()

// Here "ADMIN" will be sent to auth0 and the rule put the role to jwt token.
loginWithRedirect({
  role: 'ADMIN',
})

Configure environment variables

In the root directory, Specify .env and .env.localhost file with the following environment variables:

.env

DATABASE_URL="mysql://fga:fga@db:3306/fga"
AUTH0_CLIENT_ID=<Client Id>
AUTH0_DOMAIN=<Domain>
AUTH0_AUDIENCE=<Audience>
GRAPHQL_END_POINT=http://localhost:5001/graphql

.env.localhost

DATABASE_URL="mysql://fga:fga@localhost:3306/fga"
AUTH0_CLIENT_ID=<Client Id>
AUTH0_DOMAIN=<Domain>
AUTH0_AUDIENCE=<Audience>
GRAPHQL_END_POINT=http://localhost:5001/graphql

And in the frontend root directory, Specify .env.local file with the following environment variables:

NEXT_PUBLIC_AUTH0_CLIENT_ID=<Client Id>
NEXT_PUBLIC_AUTH0_DOMAIN=<Domain>
NEXT_PUBLIC_AUTH0_AUDIENCE=<Audience>
NEXT_PUBLIC_GRAPHQL_END_POINT=http://localhost:5001/graphql

Backend

install deps

pnpm install

start server

docker-compose up

Graphql Playground will start on localhost:5001

scripts

The scripts you might frequently use:

db:migration:generate: Generates migration file (not apply automatically). Run this whenever you change your database schema.
db:migration:run: Runs generated migration file. Run this after you generate the migration file.
prisma-gen: Generates the Prisma client
prisma-studio: Starts Prisma Studio on localhost:5555 where you can inspect your local development database.

connect to your mysql database

 docker exec -it backend_db_1 mysql -u root -p

 mysql> use fga

Frontend

start

Run the command below. which uses turborepo cli internally and it runs shared ui package's watch script as well.

pnpm run dev

workflow

Update GraphQL API

1. Edit Schema file

path: apps/backend/src/api/graphql/typeDefs.ts

2. run graphql-codegen to generate files based on the latest schema

pnpm run generate:graphql

this will run turbo run codgen:graphql, which runs all codegen:graphql in each package.

devdeno / fullstack-graphql-app Goto Github PK