Add cloudfoundry page and api endpoint (proof of concept for local development)

.gitignore

@@ -1 +1,4 @@
 node_modules
+
+# NextJS env files
+.env.local

nextjs/nextjs-site/.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"],
   "rules": {
-    "no-unused-vars": 2
+    "no-unused-vars": 2,
+    "prefer-const": 2
   }
 }

nextjs/nextjs-site/README.md

@@ -4,6 +4,8 @@ This is a starter template for [Learn Next.js](https://nextjs.org/learn).
 
 This demo requires Node version 18 or higher.
 
+## Development
+
 ### A note on zscaler
 
 If zscaler is active in your environment, you must make Node aware of your zscaler certificate by setting the `NODE_EXTRA_CA_CERTS` variable. This only needs to be done once.
@@ -16,7 +18,38 @@ security find-certificate -a -c zscaler -p > zscaler_root_ca.pem
 
 After exporting that .pem, add `export NODE_EXTRA_CA_CERTS=path/to/zscaler_root_ca.pem` to your .zshrc / .bashrc / whatever. That will fix SSL issues during npm install.
 
-## Development
+### Prerequisites
+
+To access Cloud Foundry data, you must set the following environment variables:
+
+```
+CF_API_URL=[your Cloud foundry api url, including https:// and /v version]
+CF_API_TOKEN=[your Cloud Foundry oauth token, including the "bearer" prefix]
+```
+
+For CAPI requests to work, the url and token must be compatible. For example, you cannot use a development url and a production token together.
+
+To obtain your token, first log into the correct environment in your CLI:
+
+```
+cf login -a [your cf domain] --sso
+```
+
+Then run:
+
+```
+cf oauth-token
+```
+
+Copy this token and set it as your `CF_API_TOKEN` variable.
+
+Note that oauth tokens expire frequently. To obtain a new token, just run `cf oauth-token` again and replace your previous variable value with the new one.
+
+Also note that depending on your role, you may not be able to access all Cloud Foundry endpoints.
+
+For storing local environment variables, create a `.env.local` file in the project root. Do not check this file into source control. For more info, see [NextJS docs: Environment Variables](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables).
+
+### Running locally
 
 In this directory, run this to install dependencies:
 ```

nextjs/nextjs-site/api/api.js

@@ -1,9 +1,12 @@
 /***/
 // API library for basic error handling and serialization
 /***/
-export async function getData(url) {
+export async function getData(url, options = {}) {
     try {
-        const res = await fetch(url);
+        const res = await fetch(url, {
+            method: "GET",
+            ...options
+        });
         if (res.ok) {
             const data = await res.json();
             return data;

nextjs/nextjs-site/api/cloudfoundry.js

@@ -0,0 +1,24 @@
+/***/
+// API library for cloud foundry requests
+/***/
+import { getData } from './api';
+
+const CF_API_URL = process.env.CF_API_URL;
+const CF_API_TOKEN = process.env.CF_API_TOKEN;
+
+export async function getCFApps() {
+    try {
+        const body = await getData(CF_API_URL + "/apps", {
+            headers: {
+                "Authorization": CF_API_TOKEN
+            }
+        });
+        if (body.resources) {
+            return body.resources;
+        } else {
+            throw new Error("resources not found");
+        }
+    } catch (error) {
+        throw new Error(error.message);
+    }
+};

nextjs/nextjs-site/app/cloudfoundry/apps/page.js

@@ -0,0 +1,19 @@
+import { getCFApps } from '../../../api/cloudfoundry';
+
+export default async function CloudFoundryAppsPage() {
+    try {
+        const apps = await getCFApps();
+        return (
+            <>
+                <h1>Your CF Apps</h1>
+                <ul>{apps.map(app => (
+                    <li key={app.guid}>{app.name}</li>
+                ))}</ul>
+            </>
+        )
+    } catch (error) {
+        return(
+            <div role='alert'>{ error.message }</div>
+        )
+    }
+}

nextjs/nextjs-site/app/cloudfoundry/page.js

@@ -0,0 +1,12 @@
+import Link from 'next/link';
+
+export default function CloudFoundryPage() {
+    return(
+        <>
+            <h1>Cloud Foundry Functions</h1>
+            <ul>
+                <li><Link href="/cloudfoundry/apps">apps list</Link></li>
+            </ul>
+        </>
+    );
+};

nextjs/nextjs-site/app/page.js

@@ -8,6 +8,7 @@ export default function Home() {
             <li><Link href="/clientside">Example of clientside rendering</Link></li>
             <li><Link href="/serverside">Example of serverside rendering</Link></li>
             <li><Link href="/users">Example of dynamic rendering (server-side)</Link></li>
+            <li><Link href="/cloudfoundry">Cloudfoundry home</Link></li>
         </ul>
         </div>
     );