Full-stack todo starter app

TypeScript with React, Apollo and Node example

Setup

Assumes MacOS

Install Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install MySQL

Install MySQL with Homebrew (MySQL commands on MacOS).

brew install mysql
brew tap homebrew/services

Start MySQL

brew services start mysql

Install Yarn

brew install yarn

Clone repo and cd to root of project

git clone https://github.com/tiagob/todo-starter.git
cd todo-starter

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

Install dependencies

yarn install

Setup database

Create database and sync (creating tables).

cd server
./createDb.sh  # Assumes MySQL is installed with Homebrew
yarn sync-db

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

Setup VSCode (recommended IDE/Editor)

The config files (.vscode/) are included which formats on save and automatically attaches the debugger.

Install recommended extensions

• Prettier
• ESLint
• Debugger for Chrome
• GraphQL for VSCode

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