graphlatte

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

What is in Graphlatte

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

Installation

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

1. Use this template directly on GitHub

   • https://github.com/graphlatte/graphlatte/generate

2. 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.