TypeScript + Apollo monorepo config

.dockerignore

.DS_Store
.env
.vscode
Dockerfile
docker-compose.yml
frontend/.next
frontned/out/
node_modules
npm-debug.log*
yarn-debug.log*
yarn-error.log*

codegen.yml

schema:
  - ./schema.graphql
  # Apollo-Server puts Upload in the schema, but it can't be in the .graphql file.
  # https://github.com/dotansimha/graphql-code-generator/issues/1073
  - |
    scalar Upload

overwrite: true

header: &header "\n
/****************************************************/\n
/*********** GENERATED FILE - DO NOT EDIT ***********/\n
/****************************************************/\n
\n
// tslint:disable: interface-over-type-literal array-type no-implicit-dependencies" 

generates:

  ./backend/types.ts:
    plugins:
      - add: *header
      - typescript
      - typescript-resolvers

  ./frontend/types.tsx:
    documents:
      - ./frontend/{components,lib,pages}/**/*.{ts,tsx}
    plugins:
      - add: *header
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      skipTypename: true

docker-compose.yml

version: '3.7'
services:
  backend:
    build:
      context: .
      target: backend
    env_file: .env
    ports:
      - '5000:5000'
    restart: always
  frontend:
    build:
      context: .
      target: frontend
    env_file: .env
    ports:
      - '8080:8080'
    restart: always

Dockerfile

# Remember that additional env vars can be in a .env, which docker-compose
# uses when building the image.

FROM node:12-alpine AS base
VOLUME /usr/local/share/.cache/yarn
COPY ./ /app/
WORKDIR /app/
RUN npm install --silent --global yarn
RUN yarn install --pure-lockfile --non-interactive

FROM base AS frontend
ENV NODE_ENV=production
WORKDIR /app/frontend/
RUN yarn global add http-server
RUN yarn run build
EXPOSE 8080/tcp
CMD cd out && http-server

FROM base AS backend
ENV NODE_ENV=production
WORKDIR /app/backend/
CMD yarn run start
EXPOSE 5000/tcp

package.json

{
  "private": true,
  "workspaces": [
    "backend",
    "frontend",
    "common"
  ],
  "scripts": {
    "lint": "tslint --project .",
    "lint:fix": "tslint --fix --project .",
    "build-types": "gql-gen",
    "watch-types": "nodemon -e graphql,yml,ts -w schema.graphql -w codegen.yml -w frontend/lib -x gql-gen"
  },
  "dependencies": {
    "@graphql-codegen/add": "^1",
    "@graphql-codegen/cli": "^1",
    "@graphql-codegen/typescript": "^1",
    "@graphql-codegen/typescript-operations": "^1",
    "@graphql-codegen/typescript-react-apollo": "^1",
    "@graphql-codegen/typescript-resolvers": "^1",
    "graphql": "^14",
    "graphql-tag": "^2.10.1",
    "ts-node": "^8",
    "typescript": "^3.6"
  },
  "devDependencies": {
    "@types/graphql": "^14.5.0",
    "husky": "^3.0.4",
    "lint-staged": "^9.2.5",
    "nodemon": "*",
    "prettier": "^1.18.2",
    "tslint": "^5.19.0",
    "tslint-config-prettier": "^1.18.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsc --noEmit && lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": [
      "prettier --write",
      "git add"
    ],
    "*.{ts,tsx}": [
      "tslint --fix",
      "prettier --write --parser=typescript",
      "git add"
    ]
  }
}

schema.graphql

type User {
  id: ID!
  username: String!
}

type LogInResponse {
  success: Boolean!
  error: String
  token: String
}

type Query {
  me: User
}

type Mutation {
  login(username: String!, password: String!): LogInResponse
}
  
  

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "resolveJsonModule": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules", "frontend/node_modules", "backend/node_modules"]
}

tslint.json

{
  "extends": ["tslint:latest", "tslint-config-prettier"],
  "rules": {
    "interface-name": [true, "never-prefix"],
    "object-literal-sort-keys": false,
    "no-implicit-dependencies": [true, "dev"],
    "no-submodule-imports": false,
    "max-classes-per-file": false
  },
  "linterOptions": {
    "exclude": [
      "node_modules/**",
      "**/node_modules/**",
      "**/*.d.ts",
      "**/*.json",
      "graphql/generated/types.ts"
    ]
  }
}