alexnederlof / todo-starter

Sample app for Apollo server, Postgres and Typescript

Full-stack todo starter app

TypeScript with React, Apollo and Node example

All commands below are run from the root project directory todo-starter.

Install dependencies

yarn

Setup database

Create database and sync (creating tables).

cd server
docker-compose up -d
yarn sync-db

Authentication

This sample app works with GitHub authentication. To use it, create a GitHub OAuth app in your GitHub account, and add the client id and secret to the server/.env file, as demonstrated in the server/.env.sample file. Alternatively, you can pass it as environment properties as well.

Run

Create two bash terminals (terminal 1, terminal 2). cd into the root of the cloned repo in both.

In terminal 1

cd server
yarn watch

In terminal 2

cd client
yarn watch

Debug client

Run watch from VSCode terminal.

cd client
yarn watch

Press F5 or click the green debug icon for Chrome launch configuration to attach.

Debug server

Run watch-debug from VSCode terminal. Debugger automattically attaches. See debugging in VSCode.

cd server
yarn watch-debug

Code generation

Repo uses graphql-code-generator. Client React components for GraphQL queries and mutations are automatically generated via the typescript-react-apollo plugin from the *.graphql files. Server relies on type generation via the typescript plugin. This code is automattically generated when running yarn watch for client and server. It lives in the /src/generated folder in both /client and /server.

Gotchas

EADDRINUSE, Address already in use

Kill all node processes.

killall node

References

• TypesScript
• React
• Apollo Client
• Apollo Server
• GraphQL Codegen
• Sequelize
• Yarn Workspaces