chore: deploy refactored app

.eslintrc.json

@@ -1,9 +1,14 @@
 {
+  "plugins": [
+    "eslint-plugin-next-on-pages"
+  ],
   "extends": [
     "next/core-web-vitals",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:eslint-plugin-next-on-pages/recommended"
   ],
   "rules": {
-    "prettier/prettier": "error"
+    "prettier/prettier": "error",
+    "next-on-pages/no-unsupported-configs": "error"
   }
 }

.github/workflows/ci.yml

@@ -13,12 +13,14 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: '0'
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
-      - name: 🚀 Deploy 🚀
-        run: make deploy
-        env:
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          node-version-file: '.node-version'
+      - name: 🔨 Install Dependencies 🔨
+        run: sudo apt-get update && sudo apt-get install make
+      # - name: 🚀 Deploy 🚀
+      #   run: make deploy
+      #   env:
+      #     OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      #     CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+      #     CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.gitignore

@@ -30,13 +30,17 @@ yarn-error.log*
 # vercel
 .vercel
 
+# Cloudflare
+.wrangler
+
 # typescript
 *.tsbuildinfo
 next-env.d.ts
 
 # Generated
 public/career
 .lighthouseci
+.wrangler/
 
 # Editors
 .idea/

.node-version

@@ -0,0 +1 @@
+18.17.0

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-prettier/recommended"]
+}

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.17.0

Makefile

@@ -4,11 +4,13 @@ install:
 dev:
 	npm run dev
 
-.PHONY: build
-build:
-	npm run build
+dev_cloudflare:
+	npm run pages:dev
 
-start: build
+build: clean
+	npm run pages:build
+
+start:
 	npm run start
 
 lint:
@@ -18,13 +20,32 @@ lint_fix:
 	npm run lint:fix
 
 performance:
-	chmod +x ./script/$@.sh
-	./script/$@.sh "3000"
+	npm run lighthouse
+
+test: performance
+
+ensure_cloudflare_kv_exists:
+	chmod +x ./script/cloudflare/ensure-cloudflare-kv-exists.sh
+	./script/cloudflare/ensure-cloudflare-kv-exists.sh "IMAGE_ANALYZER_KV"
+
+ensure_cloudflare_page_exists:
+	chmod +x ./script/cloudflare/ensure-cloudflare-pages-exists.sh
+	./script/cloudflare/ensure-cloudflare-pages-exists.sh "image-analyzer-app"
 
-test: lint build
+ensure_cloudflare_secrets_exist:
+	@$(call add_cloudflare_secret,"image-analyzer-app","NODE_VERSION",$(shell cat .node-version))	
 
-deploy: install test
+ensure_cloudflare_infra_exists: ensure_cloudflare_page_exists ensure_cloudflare_kv_exists ensure_cloudflare_secrets_exist
+
+deploy_cloudflare_page:
 	npm run pages:deploy
 
+deploy: install build ensure_cloudflare_infra_exists deploy_cloudflare_page
+
 clean:
-	rm -rf node_modules/ .next/
+	rm -rf .next/ .vercel/ build/
+
+define add_cloudflare_secret
+	chmod +x ./script/cloudflare/ensure-cloudflare-secret-exists.sh
+	./script/cloudflare/ensure-cloudflare-secret-exists.sh "$(1)" "$(2)" "$(3)"
+endef

README.md

@@ -1,5 +1,5 @@
 # image-analyzer-app
-> a NextJS application for analyzing images
+> a NextJS app that allows users to analyze images using MobileNet (via TensorflowJS), ChatGPT, and Cloudflare Pages
 
 ## Requirements
 
@@ -26,9 +26,4 @@ make test
 To deploy the application, run the following command:
 ```bash
 make deploy
-```
-
-## TODOS
-
-- [ ] Migrate [stockjs](https://github.com/tjmaynes/gists/tree/main/javascript/stockjs) app to web-playground
-- [ ] Migrate [tic-tac-toe](https://github.com/tjmaynes/gists/tree/main/javascript/tic-tac-toe) app to web-playground
+```

env.d.ts

@@ -0,0 +1,12 @@
+import type { KVNamespace } from '@cloudflare/workers-types'
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      [key: string]: string | undefined
+      IMAGE_ANALYZER_KV: KVNamespace
+    }
+  }
+}
+
+export {}

lighthouserc.js

@@ -1,14 +1,18 @@
 module.exports = {
   ci: {
     collect: {
-      url: 'http://localhost:3000',
+      startServerCommand: 'npm run start',
+      url: 'http://localhost:9900',
+      startServerReadyTimeout: 60 * 5, // 5 minutes
       numberOfRuns: 1,
     },
     assert: {
       preset: 'lighthouse:no-pwa',
       assertions: {
-        'categories:performance': ['error', { minScore: 0.9 }],
-        'categories:accessibility': ['error', { minScore: 0.9 }],
+        'bf-cache': 'off',
+        'csp-xss': 'off',
+        'uses-long-cache-ttl': 'off',
+        'total-byte-weight': 'off',
       },
     },
   },

next.config.js

@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {}
 
+const {
+  setupDevBindings,
+} = require('@cloudflare/next-on-pages/__experimental__next-dev')
+
+setupDevBindings({
+  kvNamespaces: ['IMAGE_ANALYZER_KV'],
+})
+
 module.exports = nextConfig