feat: create frontend GitHub actions workflows, added new frontend te…

…mplate (#118)

* feat: renamed workflow files, added next_integration

* feat: added next boilerplate, workflow updates to support cf pages on frontend/next

* feat: created pages teardown bash script

* test: allowing staging teardown script to run as test

* fix: updated working dir for cf_teardown ci

* fix: added bash and test to staging teardown

* fix: bash scripts end in .sh

* fix: reverted staging teardown to apply to pr close only

* nit: added comments to pages_teardown.sh

* nit: added comments to pages_teardown.sh, removed unneeded next boilerplate code

.github/workflows/next_integration.yaml

@@ -0,0 +1,68 @@
+name: Next Integration
+
+on:
+  pull_request
+
+env:
+  CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
+  PAGES_PROJECT_NAME: shafa-next
+  DEPLOY_TAG: shafa-next-stage-${{ github.event.number }}
+  DEPLOY_ROUTE: https://shafa-next-stage-${{ github.event.number }}.shafa-next.pages.dev
+
+jobs:
+  format_checks:
+    name: Format Checks
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+          cache-dependency-path: next/package-lock.json
+
+      - name: Install Dependencies
+        run: npm ci
+        working-directory: next 
+
+      - name: Check Next Lint
+        run: npm run check-lint
+        working-directory: next 
+
+  cf_deploy_next_stage:
+    name: Deploy Next to Stage
+    runs-on: ubuntu-latest
+    needs: format_checks
+
+    environment:
+      name: next-stage-${{ github.event.number }}
+      url: ${{ env.DEPLOY_ROUTE }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+          cache-dependency-path: next/package-lock.json
+
+      - name: Install Dependencies
+        run: npm ci
+        working-directory: next
+
+      - name: Build Cloudflare Next on Pages
+        run: npm run pages:build
+        working-directory: next
+
+      - name: Deploy Next
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ env.CF_API_TOKEN }}
+          command: pages deploy .vercel/output/static --project-name ${{ env.PAGES_PROJECT_NAME }} --branch ${{ env.DEPLOY_TAG }} 
+          workingDirectory: next
+

.github/workflows/hono_deploy_production.yml → .github/workflows/production_deploy.yaml

@@ -1,4 +1,4 @@
-name: Hono Deploy Production
+name: Production Deploy
 
 on:
   push:
@@ -7,14 +7,15 @@ on:
 env:
   PROD_NEON_DATABASE_URL: ${{ secrets.PROD_NEON_DATABASE_URL }}
   CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
+  PAGES_PROJECT_NAME: shafa-next
 
 jobs:
   cf_deploy_hono_prod:
-    name: Deploy Hono to Prod
+    name: Deploy Hono to Production
     runs-on: ubuntu-latest
 
     environment:
-      name: production
+      name: hono-production
       url: https://api.shafa.app
 
     steps:
@@ -49,3 +50,34 @@ jobs:
           workingDirectory: hono
           packageManager: pnpm
           postCommands: echo "${{ env.DATABASE_URL }}" | pnpm wrangler secret put DATABASE_URL --env production
+
+    cf_deploy_next_prod:
+      name: Deploy Next to Production
+      runs-on: ubuntu-latest
+
+      environment:
+        name: next-production
+        url: https://shafa.app
+
+      steps:
+        - name: Checkout
+          uses: actions/checkout@v4
+
+        - uses: actions/setup-node@v4
+          with:
+            node-version: 18
+
+        - name: Install Dependencies
+          run: npm ci
+          working-directory: next
+
+        - name: Build Cloudflare Next on Pages
+          run: npm run pages:build
+          working-directory: next
+
+        - name: Deploy Next
+          uses: cloudflare/wrangler-action@v3
+          with:
+            apiToken: ${{ env.CF_API_TOKEN }}
+            command: pages deploy .vercel/output/static --project-name ${{ env.PAGES_PROJECT_NAME }} --branch production
+            workingDirectory: next

.github/workflows/hono_teardown.yml → .github/workflows/staging_teardown.yaml

@@ -1,4 +1,4 @@
-name: Hono Teardown
+name: Staging Teardown
 
 on:
   pull_request:
@@ -8,9 +8,12 @@ env:
   NEON_PROJECT_ID: ${{ secrets.NEON_PROJECT_ID }}
   NEON_API_TOKEN: ${{ secrets.NEON_API_TOKEN }}
   CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
+  CF_ACCOUNT_ID: 287572e2291030d8c5e360fcc593a16b
   GH_ENV_APP_ID: ${{ secrets.GH_ENV_APP_ID }}
   GH_ENV_APP_PRIVATE_KEY: ${{ secrets.GH_ENV_APP_PRIVATE_KEY }}
-  DEPLOY_TAG: shafa-hono-stage-${{ github.event.number }}
+  NEXT_PAGES_PROJECT_NAME: shafa-next
+  HONO_DEPLOY_TAG: shafa-hono-stage-${{ github.event.number }}
+  NEXT_DEPLOY_TAG: shafa-next-stage-${{ github.event.number }}
 
 jobs:
   neon_delete_branch:
@@ -22,11 +25,11 @@ jobs:
         uses: neondatabase/delete-branch-action@v3.1.4
         with:
           project_id: ${{ env.NEON_PROJECT_ID }}
-          branch: ${{ env.DEPLOY_TAG }}
+          branch: ${{ env.HONO_DEPLOY_TAG }}
           api_key: ${{ env.NEON_API_TOKEN }}
 
-  cf_teardown_hono:
-    name: Teardown Staging Cloudflare Workers
+  cf_teardown:
+    name: Delete Staging Cloudflare Workers & Pages
     runs-on: ubuntu-latest
 
     steps:
@@ -37,9 +40,13 @@ jobs:
         uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ env.CF_API_TOKEN }}
-          command: delete --name ${{ env.DEPLOY_TAG }}
+          command: delete --name ${{ env.HONO_DEPLOY_TAG }}
           workingDirectory: hono
 
+      - name: Teardown Next
+        run: bash pages_teardown.sh ${{ env.NEXT_PAGES_PROJECT_NAME }} ${{ env.NEXT_DEPLOY_TAG }} ${{ env.CF_ACCOUNT_ID }} ${{ env.CF_API_TOKEN }}
+        working-directory: .github/workflows/utils
+
   gh_delete_deploy_env:
     name: Delete Github Deploy Environment
     runs-on: ubuntu-latest
@@ -52,8 +59,14 @@ jobs:
           app-id: ${{ env.GH_ENV_APP_ID }}
           private-key: ${{ env.GH_ENV_APP_PRIVATE_KEY }}
 
-      - name: Delete Github Deploy Environment
+      - name: Delete Hono Github Deploy Environment
         uses: strumwolf/delete-deployment-environment@v3
         with:
           token: ${{ steps.get-token.outputs.token }}
           environment: hono-stage-${{ github.event.number }}
+
+      - name: Delete Next Github Deploy Environment
+        uses: strumwolf/delete-deployment-environment@v3
+        with:
+          token: ${{ steps.get-token.outputs.token }}
+          environment: next-stage-${{ github.event.number }}

.github/workflows/utils/pages_teardown.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# Pages Teardown
+#
+# Deletes all preview or production branches in a Cloudflare Pages project.
+# Requires the following command line arguments delimited by spaces, as
+# described in the variable names below.
+
+PAGES_PROJECT_NAME=$1
+PAGES_BRANCH=$2
+CF_ACCOUNT_ID=$3
+CF_API_TOKEN=$4
+
+# Hit Cloudflare GET Deployments Route
+echo "Fetching deployments..."
+res=$(
+  curl --request GET \
+    --url https://api.cloudflare.com/client/v4/accounts/$CF_ACCOUNT_ID/pages/projects/$PAGES_PROJECT_NAME/deployments \
+    --header "Content-Type: application/json" \
+    --header "Authorization: Bearer ${CF_API_TOKEN}"
+)
+
+deployments_length=$(echo "${res}" | jq '.result | length')
+
+# Loop over each deployment
+echo "Fetched deployments. Looping over ${deployments_length} results..."
+for ((i=0; i<$deployments_length; i++)); do
+
+  deployment_branch=$(echo "${res}" | jq -c ".result[$i].deployment_trigger.metadata.branch")
+
+  # Check if the branch of the deployment matches with the PAGES_BRANCH
+  if [[ ${deployment_branch//\"/} == "${PAGES_BRANCH}" ]]; then
+
+    deployment_id=$(echo "${res}" | jq -c ".result[$i].id")
+    echo "Deleting deployment id: ${deployment_id//\"/}"
+
+    curl --request DELETE \
+      --url https://api.cloudflare.com/client/v4/accounts/$CF_ACCOUNT_ID/pages/projects/$PAGES_PROJECT_NAME/deployments/${deployment_id//\"/}?force=true \
+      --header "Content-Type: application/json" \
+      --header "Authorization: Bearer ${CF_API_TOKEN}"
+  fi
+done

next/.eslintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:eslint-plugin-next-on-pages/recommended"
+  ],
+  "plugins": [
+    "eslint-plugin-next-on-pages"
+  ]
+}

next/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -33,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# wrangler files
+.wrangler
+.dev.vars

next/README.md

@@ -1,34 +1,27 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped
+with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
 
 ## Getting Started
 
 First, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+## Cloudflare integration
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application
+with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
 
-## Learn More
+- `pages:build` to build the application for Pages using
+  the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
+- `preview` to locally preview your Pages application using
+  the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
 
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (
+> periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more
+> details see
+> the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md#recommended-workflow))

next/env.d.ts

@@ -0,0 +1,5 @@
+// Generated by Wrangler
+// by running `wrangler types --env-interface CloudflareEnv env.d.ts`
+
+interface CloudflareEnv {
+}

next/next.config.mjs

@@ -0,0 +1,13 @@
+import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+
+// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
+// (when running the application with `next dev`), for more information see:
+// https://github.com/cloudflare/next-on-pages/blob/5712c57ea7/internal-packages/next-dev/README.md
+if (process.env.NODE_ENV === 'development') {
+  await setupDevPlatform();
+}
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;