TypeScript works with GraphQL

Author: clintonwoo

Dockerfile

@@ -2,24 +2,27 @@
 FROM node:10.15.3-alpine as devBuild
 WORKDIR /usr/src/app
 
-RUN yarn
-# Copy the source and build
-# Build script uses --dev flag to get the right dependencies
+# Log the settings for NPM and Environment variables
+RUN npm config ls
+RUN env
+
+# Copy the source code and build
 COPY . .
-RUN yarn run build:prod
+RUN npm install
+RUN npm run build
 
 # PROD BUILD STEP
-# Using latest LTS release of Node (comes with Yarn package manager by default)
+# Using latest LTS release of Node
 FROM node:10.15.3-alpine
 
 # Create an app directory on the container
 WORKDIR /usr/src/app
 ENV NODE_ENV=production
 
-# Project copy build, install dependencies
-COPY --from=devBuild /usr/src/app/build/app ./build/app
-COPY package.json yarn.lock README.md ./
-RUN yarn install --prod
+# Project copy build, install only prod dependencies
+COPY --from=devBuild /usr/src/app/dist ./dist
+COPY package.json package-lock.json README.md ./
+RUN npm install --only=prod
 
 # Install curl to do healthchecks
 RUN apk add curl --no-cache
@@ -29,6 +32,6 @@ RUN apk add curl --no-cache
 EXPOSE 3000
 
 # Start the application
-CMD [ "yarn", "run start:production" ]
+CMD npm run start:production
 
 HEALTHCHECK CMD curl --silent --fail http://localhost:3000/ || exit 1

README.md

@@ -24,32 +24,34 @@ This project is a clone of hacker news rewritten with universal JavaScript, usin
 
 - React - (UI Framework)
 - GraphQL - (Web Data API)
-- Apollo - (GraphQL Client)
+- Apollo - (GraphQL Client/Server)
 - Next - (Routing, SSR, Hot Module Reloading, Code Splitting, Build tool uses Webpack)
-- Redux - (State Management)
+- Webpack - (Module Bundler)
 - TypeScript - (Static Types)
+- PostCSS - (CSS Processing)
 - Node.js - (Web Server)
 - Express - (Web App Server)
 - Passport - (Authentication)
 - Babel - (JS Transpiling)
 - TSLint - (JS Best Practices/Code Highlighting)
 - Jest - (Tests)
-- Yarn Package Manager - (Better Dependencies)
 - Docker - (Container Deployment)
 
+- Optional - Yarn or Pnpm Package Manager - (Better Dependencies)
+
 ### Benefits
 
 **Front End**
 
 - Declarative UI - (react)
-- Flux State Management - (redux)
+- Static Typing (typescript)
 - GraphQL Fragment Colocation - (react-apollo)
 - Prefetch Page Assets - (next)
 
 **Server**
 
 - Universal JS - (node & express)
-- Declarative GraphQL Schema - (react-tools)
+- Declarative GraphQL Schema - (apollo-server)
 - GraphQL Query Batching - (apollo-server-express)
 - GraphQL Stored Queries - (apollo-server-express)
 - Easy GraphiQL Include - (apollo-server-express)
@@ -63,8 +65,9 @@ This project is a clone of hacker news rewritten with universal JavaScript, usin
 
 - Hot Module Reloading - (next)
 - Snapshot Testing - (jest)
+- GraphQL Playground
 - Faster Package Install - (yarn)
-- JS Best Practices - (eslint)
+- JS Best Practices - (tslint)
 
 ### Architecture Overview
 

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  setupFilesAfterEnv: ['<rootDir>/test-setup.js'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(test).ts?(x)'],
+  verbose: true,
+};