Merge branch 'main' into COMSUP-249_jwt_example

Author: tristanlee85

.github/workflows/deploy-examples-dev.yml

@@ -19,7 +19,7 @@ concurrency:
 
 env:
   # Node version for all the jobs
-  NODE_VERSION: 16
+  NODE_VERSION: 18
 
   # Set env var based on branch name
   GIT_REF: ${{ github.ref }}

.gitignore

@@ -2,3 +2,5 @@
 node_modules/
 **/node_modules/
 **/.edgio/**
+**/.yalc/**
+yalc.lock

examples/v7-astro/package-lock.json

@@ -16,11 +16,11 @@
     "astro": "^3.2.3"
   },
   "devDependencies": {
-    "@edgio/astro": "^7.2.7",
-    "@edgio/cli": "^7.2.7",
-    "@edgio/core": "^7.2.7",
-    "@edgio/devtools": "^7.2.7",
-    "@edgio/prefetch": "^7.2.7"
+    "@edgio/astro": "^7.2.8",
+    "@edgio/cli": "^7.2.8",
+    "@edgio/core": "^7.2.8",
+    "@edgio/devtools": "^7.2.8",
+    "@edgio/prefetch": "^7.2.8"
   },
   "repository": "[email protected]:edgio-docs/edgio-v7-astro-example.git"
 }

examples/v7-astro/package.json

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

examples/v7-edge-functions/.eslintrc.json

@@ -1,5 +1,45 @@
+# 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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 # Temporary Edgio files
 .edgio
 
 # Node.js modules
 node_modules
+
+# Edgio generated build directory
+.edgio

examples/v7-edge-functions/.gitignore

@@ -4,15 +4,65 @@
 require('dotenv').config();
 
 module.exports = {
+  connector: '@edgio/next',
+
   // The name of the site in Edgio to which this app should be deployed.
-  name: 'edgio-functions-examples',
+  // name: 'my-site-name',
 
-  // The name of the team in Edgio to which this app should be deployed.
-  team: 'edge-functions-sandbox',
+  // The name of the organization in Edgio to which this app should be deployed.
+  // organization: 'my-organization-name',
 
   // Overrides the default path to the routes file. The path should be relative to the root of your app.
   // routes: 'routes.js',
 
+  // When set to true or omitted entirely, Edgio includes the deployment number in the cache key,
+  // effectively purging the cache each time you deploy.
+  // purgeCacheOnDeploy: false,
+
+  next: {
+    // Output sourcemaps so that stack traces have original source filenames and line numbers when tailing
+    // the logs in the Edgio developer console.
+    // This config options replaces the edgioSourceMaps option in next.config.js.
+    // @default true
+    // generateSourceMaps: true
+    //
+    // Disables the Edgio image optimizer and allows to use the Next's built in image optimizer.
+    // This config options replaces the disableImageOptimizer option in edgio.config.js root.
+    // @default false
+    // disableImageOptimizer: false
+    //
+    // Disables the Edgio development tools widget on the site.
+    // This config options replaces the disableEdgioDevTools option in next.config.js.
+    // @default false
+    // disableDevtools: false
+    //
+    // Disables the build of the service worker.
+    // @default false
+    // disableServiceWorker: false
+    //
+    // Forces the @edgio/next connector to use the server build.
+    // This config option replaces the NEXT_FORCE_SERVER_BUILD env variable.
+    // @default false
+    // forceServerBuild: false
+    //
+    // Optimizes the server build by bundling all server assets and decreasing the overall startup time.
+    // This option has no effect on apps with serverless build.
+    // This option is set to false for Next 13.x apps.
+    // @default true
+    // optimizeServerBuild: true
+    //
+    // Set this option to false to remove the default rule that proxies all requests to Next.js in serverless.
+    // This is useful if you want to proxy all unmatched pages to different origin.
+    // @default true
+    // proxyToServerlessByDefault: true
+    //
+    // Set this option to true to honor Next's internal redirects that either add or remove a trailing slash
+    // depending on the value of the `trailingSlash` config. When set to false, these internal redirects are not honored,
+    // so sites that fallback to serving from an origin do not add or remove the trailing slash for origin URLs.
+    // @default true
+    // enforceTrailingSlash: true
+  },
+
   origins: [
     {
       // The name of the backend origin
@@ -30,6 +80,15 @@ module.exports = {
         },
       ],
     },
+    {
+      name: 'echo',
+      override_host_header: 'http-echo.raees.me',
+      hosts: [
+        {
+          location: 'http-echo.raees.me',
+        },
+      ],
+    },
     {
       name: 'planetscale',
       override_host_header: 'aws.connect.psdb.cloud',
@@ -63,28 +122,6 @@ module.exports = {
     },
   ],
 
-  // Uncomment the following to specify environment specific configs
-  // environments: {
-  //   production: {
-  //     hostnames: [{ hostname: 'www.mysite.com' }],
-  //   },
-  //   staging: {
-  //     hostnames: [{ hostname: 'staging.mysite.com' }],
-  //     origins: [
-  //       {
-  //         name: 'origin',
-  //         hosts: [{ location: 'staging-origin.mysite.com' }],
-  //         override_host_header: 'staging-origin.mysite.com',
-  //         tls_verify: {
-  //           use_sni: true,
-  //           sni_hint_and_strict_san_check: 'staging-origin.mysite.com',
-  //         },
-  //         shields: { us_east: 'DCD' },
-  //       },
-  //     ],
-  //   },
-  // },
-
   // Options for hosting serverless functions on Edgio
   // serverless: {
   //   // Set to true to include all packages listed in the dependencies property of package.json when deploying to Edgio.
@@ -100,7 +137,7 @@ module.exports = {
   // Defaults to 200, which is the maximum allowed value.
   // prerenderConcurrency: 200,
 
-  // A list of glob patterns identifying which source files should be uploaded when running edgio deploy --includeSources.
+  // A list of glob patterns identifying which prerenderConcurrency source files should be uploaded when running edgio deploy --includeSources.
   // This option is primarily used to share source code with Edgio support personnel for the purpose of debugging. If omitted,
   // edgio deploy --includeSources will result in all files which are not gitignored being uploaded to Edgio.
   //

examples/v7-edge-functions/edgio.config.js

@@ -4,6 +4,7 @@ import {
   setCookieToResponse,
 } from '../../../utils/cookies';
 import { setEnvFromContext } from '../../../utils/polyfills/process.env';
+import '../../../utils/polyfills/URL';
 import waitingPage from './waiting-room-capacity.html';
 import landingPage from './waiting-room-landing.html';
 
@@ -59,7 +60,13 @@ function generateId(len = 10) {
  * Handle the default response.
  */
 async function getDefaultResponse(request, userId) {
-  const response = new Response(landingPage);
+  const response = new Response(
+    landingPage({
+      domain: getDomainFromRequest(request),
+      maxUsers: TOTAL_ACTIVE_USERS,
+      sessionDuration: SESSION_DURATION_SECONDS,
+    })
+  );
   response.headers.set('content-type', 'text/html;charset=UTF-8');
 
   const cookies = getCookiesFromRequest(request);
@@ -126,7 +133,12 @@ async function setExpiryRecord(key, value, seconds) {
  * Response for the waiting room.
  */
 async function getWaitingRoomResponse() {
-  const response = new Response(waitingPage);
+  const response = new Response(waitingPage());
   response.headers.set('content-type', 'text/html;charset=UTF-8');
   return response;
 }
+
+function getDomainFromRequest(request) {
+  const url = new URL(request.url);
+  return url.origin;
+}

examples/v7-edge-functions/functions/database/upstash/index.js

@@ -1,4 +1,4 @@
-const template = `
+const template = () => `
 <!DOCTYPE html>
 <html lang="en">
 

examples/v7-edge-functions/functions/database/upstash/waiting-room-capacity.html.js

@@ -1,4 +1,4 @@
-const template = `
+const template = ({ domain, maxUsers, sessionDuration }) => `
 <!DOCTYPE html>
 <html lang="en">
 
@@ -103,11 +103,18 @@ const template = `
     <div class='container'>
         <h1>Welcome to the Waiting Room Demo</h1>
         <p>
-            This demo showcases an effective way to manage website traffic during high-volume periods. When the site is at full capacity, visitors are temporarily placed in a waiting room, ensuring a smooth user experience.
+            This demo showcases an effective way to manage website traffic during high-volume periods.
+            When the site is at full capacity, visitors are temporarily placed in a waiting room, ensuring a smooth user experience.
+        </p>
+        <p>
+          This is configured for a maximum of ${maxUsers} active sessions, with each session lasting ${sessionDuration} seconds.
+        </p>
+        <p>
+          Experience this firsthand by opening <a href="${domain}/example/upstash-database">this link</a> in multiple incognito/private browser sessions. 
+          Once the site is at full capacity (2 active sessions), you will be placed in a waiting room until a spot opens up.
         </p>
-        <p>Experience this firsthand by opening <a href="/example/upstash-database">this link</a> in multiple browser sessions. Once the site is at full capacity (2 active sessions), you will be placed in a waiting room until a spot opens up.</p>
         <p>Optionally, issue the <pre>curl</pre> command below to make multiple requests:</p>
-        <div class="code-block">curl https://edgio-community-examples-v7-edge-functions-live.edgio.link/example/upstash-database</div>
+        <div class="code-block">curl ${domain}/example/upstash-database</div>
         <button class="copy-btn" onclick="copyCodeToClipboard()">Copy Code</button>
         <p>Dive into the code to see how it works.</p>
         <p><a href="https://github.com/edgio-docs/edgio-v7-edge-functions-example" target="_blank">View the demo code on GitHub</a></p>

examples/v7-edge-functions/functions/database/upstash/waiting-room-landing.html.js

@@ -0,0 +1,27 @@
+import createFetchForOrigin from '../../utils/createFetchForOrigin';
+import '../../utils/polyfills/URL';
+
+const fetch = createFetchForOrigin('echo');
+
+export async function handleHttpRequest(request, context) {
+  const { method } = request;
+  const body = method === 'POST' ? await request.arrayBuffer() : null;
+
+  // get the headers from the incoming request, removing the content-length header
+  const headers = Object.fromEntries(
+    [...request.headers.entries()].filter(([key]) => key !== 'content-length')
+  );
+
+  const newRequest = new Request('https://http-echo.raees.me', {
+    method,
+    headers,
+    body,
+  });
+
+  const response = await fetch(newRequest);
+
+  // apply caching headers to the response for all HTTP methods
+  response.headers.set('cache-control', 's-maxage=600');
+
+  return response;
+}

examples/v7-edge-functions/functions/general/caching.js

@@ -0,0 +1,16 @@
+import '../../utils/polyfills/URL';
+
+export async function handleHttpRequest(request, context) {
+  // Retrieve the client's IP address from the context object
+  const clientIP = context.client.dst_addr;
+
+  const newRequest = new Request(request.url, request);
+
+  // Add the true-client-ip header to the incoming request
+  newRequest.headers.set('true-client-ip', clientIP);
+
+  // Continue with the modified request
+  return fetch(newRequest, {
+    edgio: { origin: 'echo' },
+  });
+}

examples/v7-edge-functions/functions/general/client-ip.js

@@ -0,0 +1,18 @@
+export async function handleHttpRequest(request, context) {
+  const country = 'DE'; // Choose a country code
+  const newUrl = `${request.url}/${country}`; // Change the redirect URL to your choice
+
+  if (context.geo.country === country) {
+    return new Response(null, {
+      status: 302,
+      statusText: 'Found',
+      headers: {
+        Location: newUrl,
+      },
+    });
+  }
+
+  return fetch(request.url, {
+    edgio: { origin: 'echo' },
+  });
+}

examples/v7-edge-functions/functions/general/redirect-country.js

@@ -83,6 +83,10 @@ export async function handleHttpRequest(request, context) {
                 overflow-wrap: break-word;
                 white-space: pre-wrap;
               }
+
+              p pre {
+                display: inline;
+              }
             </style>
         </head>
         <body>
@@ -165,6 +169,35 @@ export async function handleHttpRequest(request, context) {
                 </li>
               </ul>
             </section>
+
+            <section>
+              <h2>Caching</h2>
+              <p>Examples demonstrating caching for different request types. Observe unique caching for GET and POST w/ body requests.</p>
+              <ul>
+                <li>
+                  <strong>GET Request</strong>
+                  <pre><code>${createCURLCommand(
+                    '/example/caching'
+                  )}</code></pre>
+                </li>
+                <li>
+                  <strong>POST Request with JSON payload 1</strong>
+                  <pre><code>curl -i -X POST ${domain}/example/caching -d '{"key": "value1"}'</code></pre>
+                </li>
+                <li>
+                  <strong>POST Request with JSON payload 2</strong>
+                  <pre><code>curl -i -X POST ${domain}/example/caching -d '{"key": "value2"}'</code></pre>
+                </li>
+              </ul>
+            </section>
+
+            <section>
+              <h2>Request Signing</h2>
+              <p>Request signing and verification using <strong>crypto-js</strong>. Generated URLs are valid for 60 seconds.</p>
+              <p><a href="/example/signed-request/sign/foo/bar">Generate Signed URL</a></p>
+            </section>
+
+
           </div>
           <div style="margin-top: 30px; text-align: center;">
             <a href="https://docs.edg.io/guides/v7/edge-functions" target="_blank">Edge Functions Documentation</a> | <a href="https://github.com/edgio-docs/edgio-v7-edge-functions-example" target="_blank">View the demo code on GitHub</a>