graphlatte

Next.js template with GraphQL, Urql, Prisma, Nexus and Tailwind

What is in Graphlatte

GraphQL Helix for handling requests
Nexus with Prisma (nexus-prisma)
GraphQL Codegen
- TypedDocumentNode
- Near operation files
Tailwind with a base configuration and Tailwind Prettier Plugin
Docker Compose for local Postgres database
On-save Code generation with VSCode plugin Save and Run
Next.js built-in ESLint integration
Easy global typing with definitions.d.ts file (e.g. typing .env)
Using iron-session for authentication/session handling
Envelop included

Installation

There are two main options to create a new project with Graphlatte

Use this template directly on GitHub
- https://github.com/graphlatte/graphlatte/generate
Or clone with git

In your terminal

git clone https://github.com/graphlatte/graphlatte.git project-name
cd project-name

Install dependencies, generate code and run

With yarn

yarn
yarn generate:env
yarn dev

Or with npm

npm install
npm run generate:env
npm run dev

Graphlatte comes with a base docker-compose file for running local Postgres

Requires installed and running `Docker`.

The data between Docker restarts are saved in ./docker/postgres folder (that can be changed in the Compose file)

yarn db

# or
npm run db

You can also use tool like Concurrently to run the next dev and docker-compose in one command

// package.json
{
  // ...
  "scripts": {
    "dev": "concurrently \"next\" \"docker-compose\""
  }
}

This will install dependencies, generate Prisma schema + example .env file and start the Next development server

Prisma schema gets regenerated after every yarn/npm add or install.

Deployment

Hosting

Recommended hosting choice is Vercel, which works well with Graphlatte.

You can also run Graphlatte on your server behind Nginx reverse proxy.

Database

Railway (only US regions right now)
Supabase (where you can also use PgBouncer just by adding ?pgbouncer=true flag https://supabase.io/blog/2021/04/02/supabase-pgbouncer 🤯 )
Any Cloud Provider
- with DBaaS like Cloud SQL on GCP or RDS on AWS, ...
- or with VM (you will need to set up the database yourself)

Thanks

Big thanks to huv1k.

If you would like to use Next-Auth, Dependabot and configure GraphQL Codegen differently (e.g. use generated urql hooks), check out his great boilerplate https://github.com/huv1k/nextjs-auth-prisma.

License

The MIT License.

Duckinm/graphlatte