Graphile Starter

Take it for a spin!

We're running the starter at:

https://graphile-starter.herokuapp.com

Feel free to register an account and have a poke around as you see fit.

NOTE: emails are sent from Graphile Starter, so please only enter emailaddresses you control.

NOTE: every time we merge to master, we ship a new version of GraphileStarter to Heroku and entirely wipe the database, so your data may not persist.If you wish to delete your data before this time you can do so via the deleteaccount feature baked into the starter.

NOT FOR BEGINNERS

We do not advise that you build your own projects on top of this project untilyou're comfortable with the various tools it uses(Node.js,Express,PostgreSQL,GraphQL,PostGraphile,Graphile Worker,Graphile Migrate,TypeScript,React,Apollo Client for React,GraphQL Code Generator,ESLint,Prettier, Jest,Cypress, etc).

This is an advanced project with deeply integrated tooling across the fullstack. The project is called "Starter" because it helps you to start newprojects with all these technologies, tools and techniques already in place. Ifyou're not already familiar with these things then you'll probably find theproject overwhelming, it is not intended to be your first experience of any ofthese tools.

If you're just getting started with PostGraphile, before you dive into thisproject make sure you check out thePostGraphile required knowledgeand especially theschema design tutorial.This repository takes a slightly different approach to schema design than theaforementioned tutorial, but it's still an incredibly valuable resource.

Purpose

Graphile Starter is an opinionated quick-start project for full-stackapplication development in React, Node.js, GraphQL and PostgreSQL. It includesthe foundations of a modern web application, with a full user registrationsystem, organizations (e.g. teams/companies/etc), session management, optimizedjob queue, a significant amount of pre-configured tooling, tests (bothend-to-end and more granular) and much more.

It is suitable for building projects both large and small, with a focus onproductivity. You might use it:

• to go from conception to launch of a web app during a hack day
• as the foundation for client projects at your web agency
• to build your side-hustle without spending lots of time on boilerplate
• to build a SaaS project to help fund your open source work ��

However you use it, the project can be deployed to many platforms, and can bescaled to larger audiences both horizontally and vertically with very fewchanges.

Please note that this software is not "complete," free of software defects, orfree of security issues — it is not a "finished" solution, but rather the seedof a solution which you should review, customize, fix, and develop further.

It is intended that you use a "point in time" version of this software ─ it isnot intended that you can merge updates to this software into your ownderivative in an automated fashion.

Crowd-funded open-source software

PLEASE DONATE.

Take this software and use it as the starting point to build your project. Gomake some money, and give something back tosupport us building more tools and kits for the Node, GraphQL and PostgreSQLecosystems. We have made this project available under the simple and liberal MITlicense to give you to a huge amount of freedom in how you use it, but thisisn't possible without the help of our wonderful sponsors.

We need more people to join our sponsors so we can continue to bring aboutawesome projects like this. We'd love to spend more time on open source,building tools that will save you and others even more time and money ─ pleasesponsor our open source efforts:

Click here to find out more about sponsors and sponsorship.

And please give some love to our featured sponsors �� :

Chad Furman *

Storyscript *

Postlight *

Surge.io *

* Sponsors the entire Graphile suite

Table of contents

• Graphile Starter
  • Take it for a spin!
  • NOT FOR BEGINNERS
  • Purpose
  • Crowd-funded open-source software
    • Click here to find out more about sponsors and sponsorship.
  • Table of contents
  • Features
  • Variants
  • Prerequisites
    • Local development
    • Docker development
  • Getting started
  • Running
  • Making it yours
  • Docker development
  • Building the production docker image
  • Production build for local mode
  • Deploying to Heroku
  • Cleanup
  • Custom packages
  • MIT License

Features

Graphile Starter is a full-stack GraphQL andReact project, with server-side rendering (SSR) androuting thanks to Next.js. The backend is a beautifulpairing of Node.js and PostgreSQL running on Express.js, enabled byPostGraphile in library mode. Thefrontend uses the AntD design framework to acceleratedevelopment. The entire stack is written in TypeScript, with auto-generatedGraphQL types and operations thanks tographql-code-generator.

There are four tenets to Graphile Starter:

• Speedy development
• Batteries included
• Type safety
• Best practices

Graphile Starter is easy to start and everything is pre-configured as much aspossible.

Speedy development: hot reloading, easy debugging, Graphile'sidempotent migration system,job queue and server middleware ready touse; not to mention deep integration with VSCode should you use that editor:plugin recommendations, pre-configured settings, ESLint and Prettier integrationand debugging profiles

Batteries included: full user system and OAuth, AntD design framework, Jestand Cypress end-to-end testing,security, email templating and transport, pre-configured linting and codeformatting, deployment instructions, and more

Type safety: pre-configured type checking, strongly typed throughout withTypeScript

Best practices: React, GraphQL, PostGraphile, Node, Jest and Cypress bestpractices

See TECHNICAL_DECISIONS.md for a more detailed list offeatures included and the technical decisions behind them.

Variants

Since this is a highly opinionated starter; community members may have slightlydifferent opinions and may choose to maintain forks of this project that applytheir own opinions. A few of these are listed below; if you maintain a fork ofthis project please make a note at the top of your own README, and add it tothis list:

• Nuxt.js variant - replacesNext.js for Vue users
• Create React App variant -replaces Next.js for apps without Server Side Rendering

VARIANTS ARE NOT OFFICIALLY SUPPORTED and may become out of date orunmaintained over time. If you have issues with variants, please submit issuesor PRs to the projects in question, not to this project.

Prerequisites

You can either work with this project locally (directly on your machine) or usea pre-configured Docker environment. We'll differentiate this in the README witha table like this one:

Be careful not to mix and match Docker-mode vs local-mode for development.You should make a choice and stick to it. (Developing locally but deploying withproduction.Docker is absolutely fine.)

IMPORTANT: If you choose the Docker mode, be sure to readdocker/README.md.

For users of Visual Studio Code (VSCode), a .vscode folder is included witheditor settings and debugger settings provided, plus a list of recommendedextensions. Should you need it, there is also a .devcontainer folder whichenables you to useVSCode's remote containersgiving you a local-like development experience whilst still using dockercontainers.

Local development

Requires:

• Node.js v14+ must be installed
• PostgreSQL v10+ server must be available
• pg_dump command must be available (or you can remove this functionality)
• VSCode is recommended, but any editor will do

This software has been developed under Mac and Linux, and should work in abash environment.

Windows users: making a project like Graphile Starter run smoothly onWindows can be a challenge; @JoeSchr and @hips on theGraphile Discord have been working in improvingthis and they're pretty pleased with the result, but you may still get someteething problems. PRs to fix Windows compatibility issues are welcome (pleasekeep them small!) Failing that, try the Docker mode :)

Docker development

Requires:

• docker
• docker-compose
• Ensure you've allocated Docker at least 4GB of RAM; significantly morerecommended
  • (Development only, production is much more efficient)

Has been tested on Windows and Linux (Ubuntu 18.04LTS).

Getting started

This project is designed to work with yarn. If you don't have yarninstalled, you can install it with npm install -g yarn. The Docker setupalready has yarn & npm installed and configured.

To get started, please run:

This command will lead you through the necessary steps, and create a .env filefor you containing your secrets.

NOTE: export UID is really important on Linux Docker hosts, otherwise thefiles and folders created by Docker will end up owned by root, which isnon-optimal. We recommend adding export UID to your ~/.profile or~/.bashrc or similar so you don't have to remember it.

Do not commit .env to version control!

Running

You can bring up the stack with:

After a short period you should be able to load the application athttp://localhost:5678

This main command runs a number of tasks:

• uses graphile-migrate to watchthemigrations/current.sql file for changes, and automatically runs itagainst your database when it changes
• watches the TypeScript source code of the server, and compiles it from@app/*/src to @app/*/dist so node/graphile-worker/etc. can run thecompiled code directly
• runs the node server (includes PostGraphile and Next.js middleware)
• runs graphile-worker to execute your tasks (e.g. sending emails)
• watches your GraphQL files and your PostGraphile schema for changes andgenerates your TypeScript React hooks for you automatically, leading tostrongly typed code with minimal effort
• runs the jest tests in watch mode, automatically re-running as the databaseor test files change

NOTE: docker-compose up server also runs the PostgreSQL server that thesystem connects to.

You may also choose to develop locally, but use the PostgreSQL server viadocker-compose up -d db.

Then for development you may need a console; you can open one with:

To shut everything down:

Making it yours

1. Download and extract a zip ofthe latest release from GitHub
2. In that folder run:
   • git init
   • git add .
   • git commit -m "Graphile Starter base"
3. Change the project name in package.json
4. Change the project settings in @app/config/src/index.ts
5. Replace the README.md file
6. Add your own copyright notices to the LICENSE.md file
7. Commit as you usually would
8. Show your appreciation with sponsorship

Docker development

Be sure to read docker/README.md.

Building the production docker image

To build the production image, use docker build as shown below. You shouldsupply the ROOT_URL build variable (which will be baked into the client code,so cannot be changed as envvars); if you don't then the defaults will apply(which likely will not be suitable).

To build the worker, pass TARGET="worker" instead of the defaultTARGET="server".

docker build \
  --file production.Dockerfile \
  --build-arg ROOT_URL="http://localhost:5678" \
  --build-arg TARGET="server" \
  .

When you run the image you must pass it the relevant environmental variables,for example:

docker run --rm -it --init -p 5678:5678 \
  -e GRAPHILE_LICENSE="$GRAPHILE_LICENSE" \
  -e SECRET="$SECRET" \
  -e JWT_SECRET="$JWT_SECRET" \
  -e DATABASE_VISITOR="$DATABASE_VISITOR" \
  -e DATABASE_URL="$DATABASE_URL" \
  -e AUTH_DATABASE_URL="$AUTH_DATABASE_URL" \
  -e GITHUB_KEY="$GITHUB_KEY" \
  -e GITHUB_SECRET="$GITHUB_SECRET" \
  docker-image-id-here

Currently if you miss required envvars weird things will happen; we don'tcurrently have environment validation (PRs welcome!).

Note: If you are using the production.Dockerfile to run graphile/starter in aDocker container on eg. Kubernetes, AWS ECS, DigitalOcean App Platform (orsimilar) and you are trying to connect to Amazon RDS or DigitalOcean databases(or probably other managed databases), make sure to replace/data/amazon-rds-ca-cert.pem with the CA certificate of your own database.This file is copied into your Docker image during build time and can thereforebe referenced in your env variables DATABASE_URL and AUTH_DATABASE_URL:
DATABASE_URL="postgres://name:password@host:port/dbname?ssl=true&sslrootcert=/app/data/amazon-rds-ca-cert.pem"

Production build for local mode

Use yarn run build to generate a production build of the project

Deploying to Heroku

Prerequisites:

• Install the Heroku CLI: https://devcenter.heroku.com/articles/heroku-cli

If you are using graphile-migrate make sure that you have executedgraphile-migrate commit to commit all your database changes, since we only runcommitted migrations in production.

Make sure you have customized @app/config/src/index.ts.

Make sure everything is committed and pushed in git.

Set up a database server; we recommend using Amazon RDS.

Once your database server is running, you can use our heroku-setup script toautomate the setup process. This script does the following:

• Creates the Heroku app
• Adds the redis extension to this Heroku app
• Creates the database in the database server
• Creates the relevant roles, generating random passwords for them
• Installs some common database extensions
• Sets the Heroku config variables
• Adds the Heroku app as a git remote named 'Heroku'
• Pushes the 'master' branch to Heroku to perform your initial build

Create a copy of heroku-setup.template and rename the copy to heroku-setup,then edit it and customize the settings at the top. We also recommend readingthrough the script and customizing it as you see fit - particularly if you areusing additional extensions that need installing.

Now run the script:

bash heroku-setup

Hopefully all has gone well. If not, step through the remaining tasks in theHeroku-setup script and fix each task as you go. We've designed the script sothat if your superuser credentials are wrong, or the Heroku app already exists,you can just edit the settings and try again. All other errors will probablyneed manual intervention. Verbosity is high so you can track exactly whathappened.

The server should be up and running now (be sure to access it over HTTPSotherwise you will not be able to run GraphQL queries), but it is not yetcapable of sending emails. To achieve this, you must configure an emailtransport. We have pre-configured support for Amazon SES. Once SES is set up,your domain is verified, and you've verified any emails you wish to send emailto (or have had your sending limits removed), make sure that the fromEmail in@app/config/src/index.ts is correct, and then create an IAM role for yourPostGraphile server. Here's an IAM template for sending emails - this is theonly permission required for our IAM role currently, but you may wish to addothers later.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "ses:SendRawEmail",
            "Resource": "*"
        }
    ]
}

Generate an Access Key for this IAM role, and then tell Heroku the access key idand secret:

heroku config:set AWS_ACCESS_KEY_ID="..." AWS_SECRET_ACCESS_KEY="..." -a $APP_NAME

Now you can tell Heroku to run the worker process as well as the currentlyrunning 'web' process:

heroku ps:scale worker=1 -a $APP_NAME

When you register an account on the server you should receive a verificationemail containing a clickable link. When you click the link your email will beverified and thanks to GraphQL subscriptions the previous tab should be updatedto reflect that your account is now verified.

You can also configure your application for social login. This works the same asin development except the callback URL will be different, something likehttps://MY_HEROKU_APP_NAME.herokuapp.com/auth/github/callback. Set the GitHubOAuth secrets on your Heroku app to trigger a restart and enable social login:

heroku config:set GITHUB_KEY="..." GITHUB_SECRET="..." -a $APP_NAME

Cleanup

To delete the Heroku app:

heroku apps:destroy -a $APP_NAME

To delete the database/roles (replace dbname with your database name):

drop database dbname;
drop role dbname_visitor;
drop role dbname_authenticator;
drop role dbname;

Custom packages

When running yarn setup, this command will also invoke lerna run setup. Thisallows you to add custom setup hooks necessary for your individual packages.

Add a line like the following to your scripts section in your package.json:

"setup": "npm i -g some-package"

MIT License

This is open source software; you may use, modify and distribute it under theterms of the MIT License, seeGRAPHILE_STARTER_LICENSE.md.