todo-starter
todo-starter copied to clipboard
tiagob
Todo Starter App
DEPRECATED IN FAVOR OF https://github.com/tiagob/create-full-stack
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
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
tiagob