K8s (#54)

* Preemptively update the README

* Setup eslint deps

* Update to node 15.4

* Configure ignore files

* Use prettier plugin

* Reformat Actions

* Specify react version

* Add postinstall script

* Also lint tsx

* Add initial devspace yaml

* 'Fix' eslint erors

* ESLint fix after generating types

* Don't dockerignore generated code

* Don't eslintignore generated code

* Don't gitignore generated code

* Track generated graphql types

* Reorg scripts

* Remove postinstall

* Remove graphql schema path arg

* Remove schema path passing

* Add generate script docs

* Update ts

* Add auto-generated warning in header

* Don't lint generated code

* Add NEXT_PUBLIC_GRAPHQL_URL var

* Get prod deploy ready to use devspace

* Add reverse forward to graph service

* Add dep on graph

* Update dependencies

* Remove need to supply graphql api url

.dockerignore

@@ -33,3 +33,6 @@ lerna-debug.log*
 
 # Testing
 /coverage
+
+# Devspace config
+devspace.yaml

.eslintignore

@@ -2,3 +2,6 @@
 /.next
 /out
 /build
+
+# Generated Code
+generated

.eslintrc.yaml

@@ -1,22 +1,27 @@
 parser: "@typescript-eslint/parser"
 
 parserOptions:
+  ecmaVersion: 2020
   project: tsconfig.json
   sourceType: module
 
 plugins:
   - simple-import-sort
-  - "@typescript-eslint/eslint-plugin"
 
 extends:
-  - plugin:@typescript-eslint/eslint-recommended
+  - eslint:recommended
   - plugin:@typescript-eslint/recommended
+  - plugin:@typescript-eslint/recommended-requiring-type-checking
+  - plugin:prettier/recommended
   - plugin:react/recommended
   - plugin:react-hooks/recommended
   - plugin:jsx-a11y/recommended
-  - prettier
   - prettier/@typescript-eslint
 
+settings:
+  react:
+    version: detect
+
 rules:
   react/react-in-jsx-scope: "off"
   react/prop-types: "off"

.github/workflows/check-container-build.yaml

@@ -16,5 +16,3 @@ jobs:
       - uses: docker/build-push-action@v2
         with:
           push: false
-          build-args: |
-            GRAPHQL_SCHEMA_PATH=https://raw.githubusercontent.com/pokernook/graph/main/schema.graphql

.github/workflows/deploy-production.yaml

@@ -11,6 +11,13 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: 15.x
+
+      - name: Install DevSpace
+        run: npm install -g devspace
+
       - name: Install doctl
         uses: digitalocean/action-doctl@v2
         with:
@@ -19,18 +26,11 @@ jobs:
       - name: Log in to DigitalOcean CR
         run: doctl registry login --expiry-seconds 600
 
-      - name: Prepare Container
-        id: prepare
-        run: |
-          URI=registry.digitalocean.com/pokernook/web
-          TAG="${URI}:sha-${GITHUB_SHA::8}"
-          echo ::set-output name=tag::${TAG}
+      - name: Build and Push Container
+        run: devspace build --profile production
 
-      - uses: docker/setup-buildx-action@v1
+      - name: Save DigitalOcean kubeconfig
+        run: doctl kubernetes cluster kubeconfig save --expiry-seconds 600 pokernook-k8s
 
-      - uses: docker/build-push-action@v2
-        with:
-          push: true
-          tags: ${{ steps.prepare.outputs.tag }}
-          build-args: |
-            GRAPHQL_SCHEMA_PATH=https://raw.githubusercontent.com/pokernook/graph/main/schema.graphql
+      - name: Deploy to Kubernetes
+        run: devspace deploy --skip-build --profile production --wait --timeout 120

.github/workflows/lint.yaml

@@ -0,0 +1,20 @@
+name: Lint
+
+on:
+  push:
+
+jobs:
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: 15.x
+
+      - name: Run ESLint Script
+        run: |
+          npm ci
+          npm run lint

.github/workflows/semantic-analysis.yaml

@@ -1,6 +1,8 @@
 name: Semantic Analysis
 
 on:
+  push:
+  pull_request:
   schedule:
     - cron: "0 0 * * *"
 

.gitignore

@@ -6,9 +6,6 @@
 # Dependencies
 node_modules
 
-# Generated Code
-generated
-
 # Logs
 logs
 *.log
@@ -33,3 +30,6 @@ lerna-debug.log*
 
 # Vercel
 .vercel
+
+# DevSpace cache and log folder
+.devspace/

Dockerfile

@@ -1,6 +1,4 @@
-FROM node:15.3.0-alpine
-ARG GRAPHQL_SCHEMA_PATH
-ENV GRAPHQL_SCHEMA_PATH=${GRAPHQL_SCHEMA_PATH}
+FROM node:15.4.0-alpine
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci

README.md

@@ -1,17 +1,20 @@
-# PokerNook Next.js App
+# PokerNook Web App
 
 ## Development Setup
 
 ### Recommended Tools
 
 - Node.js 15.x
-- Docker Desktop
+- Docker Desktop (or an alternative container runtime and local Kubernetes cluster)
 - VS Code
+- DevSpace CLI
 
 Clone the repo, then run:
 
 ```bash
 npm install # Install project dependencies
+
+devspace dev # Run the app in a Kubernetes cluster
 ```
 
 ### NPM Scripts Overview
@@ -21,6 +24,8 @@ npm run dev # Create a hot-reloading Next.js server
 
 npm run build # Build application for deployment
 
+npm run generate # Generate GraphQL types
+
 npm run sb # Storybook
 ```
 

codegen.yaml

@@ -1,9 +1,16 @@
 schema: ${GRAPHQL_SCHEMA_PATH}
 overwrite: true
 documents: src/**/*.graphql
+
 generates:
   src/generated/graphql.ts:
     plugins:
+      - add:
+          content: |
+            /**
+            * This file was generated by GraphQL Code Generator
+            * Do not make changes to this file directly
+            */
       - typescript
       - typescript-operations
       - typescript-urql

devspace.yaml

@@ -0,0 +1,68 @@
+version: v1beta9
+
+images:
+  web:
+    image: registry.digitalocean.com/pokernook/web
+    tags:
+      - sha-${DEVSPACE_GIT_COMMIT}-${DEVSPACE_RANDOM}
+    cmd: ["npm", "run", "dev"]
+    preferSyncOverRebuild: true
+    build:
+      docker:
+        useBuildKit: true
+
+deployments:
+  - name: pokernook-web
+    helm:
+      componentChart: true
+      values:
+        containers:
+          - image: registry.digitalocean.com/pokernook/web
+            env:
+              - name: NEXT_PUBLIC_GRAPHQL_URL
+                value: http://pokernook-graph:4000
+              - name: GRAPHQL_SCHEMA_PATH
+                value: http://pokernook-graph:4000
+        service:
+          ports:
+            - port: 3000
+
+dependencies:
+  - source:
+      git: https://github.com/pokernook/graph
+      branch: main
+
+profiles:
+  - name: production
+    patches:
+      - op: remove
+        path: images.web.cmd
+      - op: remove
+        path: dependencies
+      - op: remove
+        path: deployments.name=pokernook-web.helm.values.containers[0].env.name=GRAPHQL_SCHEMA_PATH
+
+dev:
+  ports:
+    - imageName: web
+      forward:
+        - port: 3000
+  open:
+    - url: http://localhost:3000
+  sync:
+    - imageName: web
+      excludePaths:
+        - .git/
+      uploadExcludePaths:
+        - /.next/
+        - node_modules
+        - generated
+        - "**/*.graphql"
+        - logs
+        - "**/*.log"
+        - npm-debug.log*
+        - yarn-debug.log*
+        - yarn-error.log*
+        - lerna-debug.log*
+        - /coverage
+        - devspace.yaml