nguyenhothanhtam / graphql-starter

💥 Yarn v2 based monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, Relay, and Material UI.

GraphQL API and Relay Starter Kit

Features

• Yarn v2 monorepo structure optimized for fast CI/CD workflows and DX (Yarn PnP, Zero-install)
• GraphQL API using code-first development approach (TypeScript, GraphQL.js, Knex, PostgreSQL)
• Stateless JWT cookie-based authentication (supporting SSR, OAuth 2.0 via Google, Facebook, etc.)
• Database tooling such as seed files, migrations, REPL shell, etc.
• Front-end boilerplate pre-configured with TypeScript, Webpack v5, React, Relay, and Materia UI
• Transactional email templates pre-configured with Handlebars, Juice, Nodemailer, previewing
• Serverless deployment: api, img → Cloud Functions, web → Cloudflare Workers
• HTML page rendering (SSR) at CDN edge locations, all ~100 points on Lighthouse
• Pre-configured dev, test / QA, production, and review (per PR) environments
• Pre-configured VSCode code snippets and other VSCode settings

---

This project was bootstrapped with GraphQL API Starter Kit. Be sure to join our Discord channel for assistance.

Directory Structure

├──.github — GitHub configuration including CI/CD workflows
├──.vscode — VSCode settings including code snippets, recommended extensions etc.
├──env — environment variables that are used for local development (dev, test, prod)
├──db — database schema, seeds, and migrations (Cloud SQL, Knex.js)
├──api — GraphQL API and authentication (Could SQL, Cloud Functions, GraphQL.js)
├──img — dynamic image resizing (Cloud Functions, Cloud Storage)
├──web — React / Relay web application with CDN rendering (Webpack, Cloudflare Workers)
├──scripts — Automation scripts shared across the project
└── ... — add more packages such as worker, admin, mobile, etc.

Requirements

• Node.js v14, Yarn package manager
• Local or remote instance of PostgreSQL (see Postgres.app, Google Cloud SQL)
• VS Code editor with recommended extensions

Getting Started

Just clone the repo and run yarn setup followed by yarn start:

$ git clone --origin=seed --branch=main --single-branch \
    https://github.com/kriasoft/graphql-starter.git example
$ cd ./example                  # Change current directory to the newly created one
$ yarn install                  # Install project dependencies
$ yarn setup                    # Configure environment variables
$ yarn start                    # Launch GraphQL API and web application

The API server must become available at http://localhost:8080/graphql.
The web application front-end must become available at http://localhost:3000/.

References

• Yarn 2 (Berry) - Plug'n'play, constraints and workspaces by @jherr
• Google Cloud SQL — Tips & Tricks by @koistya
• Database change management with Node.js by @koistya

How to Update

In the case when you kept the original Node.js Starter Kit git history, you can always pull and merge updates from the "upstream" repository back into your project by running:

$ git fetch seed                # Fetch Node.js Starter Kit (upstream) repository
$ git checkout main             # Switch to the main branch (or, master branch)
$ git merge seed/main           # Merge upstream/master into the local branch

In order to update Yarn and other dependencies to the latest versions, run:

$ yarn set version latest       # Upgrade Yarn CLI to the latest version
$ yarn upgrade-interactive      # Bump Node.js dependencies using an interactive mode
$ yarn install                  # Install the updated Node.js dependencies
$ yarn pnpify --sdk vscode      # Update VSCode settings

How to Contribute

Anyone and everyone is welcome to contribute. Start by checking out the list of open issues marked help wanted. However, if you decide to get involved, please take a moment to review the guidelines.

License

Copyright © 2016-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE file.

---

^{Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors.}