Merge pull request #1 from DevCycleHQ-Labs/ACT-116-setup-example-app

Setup initial NextJS example app

.env.sample

@@ -0,0 +1,3 @@
+## DevCycle SDK Key ##
+# This can be found in the DevCycle dashboard Settings under "Environments & Keys"
+NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY="<YOUR_SDK_KEY>"

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/unit-test.yml

@@ -0,0 +1,27 @@
+name: Unit Test
+
+on:
+  pull_request:
+    types: [opened, edited, reopened, synchronize]
+    branches:
+      - main
+  merge_group:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  unit-test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install --immutable
+      - name: Lint Project
+        run: npm run lint
+      - name: Test Project
+        run: npm run test

.github/workflows/update-dvc-sdk.yml

@@ -0,0 +1,58 @@
+name: Update DevCycle SDK to Latest
+on:
+  schedule:
+    - cron: "0 12 * * *"
+  workflow_dispatch:
+
+jobs:
+  update-dvc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+
+      - name: Set Git author
+        shell: bash
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "DevCycle Automation"
+
+      - name: Set branch name
+        shell: bash
+        run: echo "BRANCH_NAME=update-dvc-sdk" >> $GITHUB_ENV
+
+      - name: Update @devcycle/nextjs-sdk to latest
+        run: npm install @devcycle/nextjs-sdk@latest
+
+      - name: Check for changes to package.json
+        run: echo "IS_UPDATED=$(git diff --name-only origin/main package.json)" >> $GITHUB_ENV
+
+      - name: Check if branch already exists
+        run: echo "BRANCH_EXISTS=$(git branch -a | grep $BRANCH_NAME)" >> $GITHUB_ENV
+
+      - name: Commit & push changes
+        if: ${{ env.IS_UPDATED && !env.BRANCH_EXISTS }}
+        shell: bash
+        run: |
+          git checkout -b "$BRANCH_NAME"
+          git add package.json
+          git add package-lock.json
+          git commit -m "Update @devcycle/nextjs-sdk to latest"
+          git push --set-upstream origin "$BRANCH_NAME"
+
+      - name: Create Pull Request
+        if: ${{ env.IS_UPDATED && !env.BRANCH_EXISTS }}
+        shell: bash
+        env:
+          GH_TOKEN: ${{ secrets.AUTOMATION_USER_TOKEN }}
+        run: |
+          gh pr create \
+          --base main --head "$BRANCH_NAME" \
+          --title "chore(deps): Update @devcycle/nextjs-sdk to latest" \
+          --body "This PR is auto generated by this [github workflow](https://github.com/${{ github.repository }}/actions/workflows/update-dvc-sdk.yml)" \
+          --reviewer DevCycleHQ-Labs/engineering

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,2 +1,30 @@
-# example-nextjs-app-router
-An example app built using the DevCycle NextJS SDK
+# DevCycle Next.js SDK Example App (TypeScript)
+
+An example app built using [Next.js](https://nextjs.org/) and the [DevCycle Next.js SDK](https://docs.devcycle.com/sdk/client-side-sdks/nextjs/)
+
+## Creating a Demo Feature
+This example app requires that your project has a feature with the expected variables, as well as some simple targeting rules. 
+
+#### ⇨ [Click here](https://app.devcycle.com/r/create?resource=feature&key=hello-togglebot) to automatically create the feature in your project ⇦
+
+When you run the example app and switch your identity between users, you'll be able to see the feature's different variations.
+
+
+## Running the Example
+### Setup
+
+* Run `npm install` in the project directory to install dependencies
+* Create a `.env` file and set `NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY` to the SDK Key for your environment.\
+You can find this under [Settings > Environments](https://app.devcycle.com/r/environments) on the DevCycle dashboard. [Learn more about environments](https://docs.devcycle.com/essentials/environments).
+
+### Development
+
+`npm run dev`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+## Documentation
+For more information about using the DevCycle React SDK, see [the documentation](https://docs.devcycle.com/sdk/client-side-sdks/nestjs/)

jest.config.ts

@@ -0,0 +1,23 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+  testEnvironment: 'jsdom',
+}
+
+const esModules = ['@devcycle/nextjs-sdk', 'uuid'].join('|')
+
+export default async () => {
+  const nextJestConfig = await createJestConfig(config)()
+  // Custom workaround to set transformIgnorePatterns
+  // Overwrite the first pattern /node_modules/
+  nextJestConfig.transformIgnorePatterns ??= []
+  nextJestConfig.transformIgnorePatterns[0] = `/node_modules/(?!(${esModules}))`
+  return nextJestConfig
+}

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig