Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/taneba/fullstack-graphql-app

An opinionated fullstack GraphQL monorepo boilerplate using pnpm, Turborepo, Prisma, GraphQL Yoga 2, Fastify, Nextjs, urql, and React
https://github.com/taneba/fullstack-graphql-app

docker envelop fastify graphql nextjs pnpm prisma react turborepo turborepo-example typescript urql

Last synced: 3 days ago
JSON representation

An opinionated fullstack GraphQL monorepo boilerplate using pnpm, Turborepo, Prisma, GraphQL Yoga 2, Fastify, Nextjs, urql, and React

Host: GitHub
URL: https://github.com/taneba/fullstack-graphql-app
Owner: taneba
Created: 2021-08-17T03:25:29.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-12-22T16:55:04.000Z (9 days ago)
Last Synced: 2024-12-24T09:26:40.413Z (7 days ago)
Topics: docker, envelop, fastify, graphql, nextjs, pnpm, prisma, react, turborepo, turborepo-example, typescript, urql
Language: TypeScript
Homepage:
Size: 3.82 MB
Stars: 164
Watchers: 2
Forks: 16
Open Issues: 22
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 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](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html) 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](https://github.com/taneba/fullstack-graphql-app/blob/main/apps/backend/src/lib/auth0/rules/setRolesToUser.js) (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.

```ts
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=
AUTH0_DOMAIN=
AUTH0_AUDIENCE=
GRAPHQL_END_POINT=http://localhost:5001/graphql
```

.env.localhost

```
DATABASE_URL="mysql://fga:fga@localhost:3306/fga"
AUTH0_CLIENT_ID=
AUTH0_DOMAIN=
AUTH0_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=
NEXT_PUBLIC_AUTH0_DOMAIN=
NEXT_PUBLIC_AUTH0_AUDIENCE=
NEXT_PUBLIC_GRAPHQL_END_POINT=http://localhost:5001/graphql
```

## Backend

### install deps

```
pnpm install
```

### start server

```
docker-compose up
```

[Graphql Playground](https://github.com/graphql/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

```sh
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.

```sh
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**

```sh
pnpm run generate:graphql
```

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