Adapter plugin (#4)

* initial implementation of SSR pages * update status * explicitely opt-in to esbuild * delete hardcoded netlify directory * ignore netlify folder * adopt patched v0.29.0-alpha.0 version of greenwood * fix hardcoded import in output format template * segment each API function with a folder and root index.js * output package.json with module type flag for SSR pages * generate a zip for custom functions build * custom zip implementation for SSR pages * remove netlify directory from build output * create zip inside netlify folder * only output a zip file in netlify output dir * commit simpler template output format * commit simpler template output format * re-enable esbuild bundler in netlify.toml * rename SSR page output after function name * disable esbuild processing * add back package.json * restore template format output * code cleanup * update README status * get API routes outputting correctly * move API adapter output to root of functions folder * have API output entry point match route URL * fix typo on netlify.toml redirect * test dynamic splat redirecting for API routes in netlify.toml * clean up code comments * upgrade greenwood v0.29.0-alpha.1 * update compat table in README * sync with latest upstream adapter implementation * sync with latest upstream adapter implementation * Adapter plugin toml file (#5) * auto generate _redirects * use correct format for _redirects file * update README TODOs * redirects should be rewrites instead * clarify caveats and features * update latest netlify-cli version
ProjectEvergreen · Aug 12, 2023 · 31bc9ae · 31bc9ae
1 parent f1feaab
commit 31bc9ae
Show file tree

Hide file tree

Showing 14 changed files with 9,388 additions and 26,104 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .greenwood/
 .netlify/
+netlify
 node_modules/
 public/
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
diff --git a/README.md b/README.md
@@ -2,9 +2,7 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/7ad371a0-a026-423f-8a92-73b762975cc6/deploy-status)](https://app.netlify.com/sites/harmonious-gaufre-bb14cf/deploys)
 
-> ⚠️ _**Note**: Currently this repo is a WIP_
-
-A demonstration repo for using Greenwood with Netlify Serverless and Edge functions for APIs and SSR pages and used in part of crafting its design for [introducing platform "adapters" into Greenwood](https://github.com/ProjectEvergreen/greenwood/issues/1008).  It also takes reference from [this repo / presentation](https://github.com/thescientist13/web-components-at-the-edge/) for some earlier prototypes for server rendering Web Components.
+A demonstration repo for deploying a full-stack Greenwood app with Netlify static hosting and Serverless + Edge functions.
 
 ## Setup
 
@@ -15,7 +13,7 @@ To run locally
 You can now run these npm scripts
 - `npm run dev` - Start the demo with Greenwood local dev server
 - `npm run serve` - Start the demo with a production Greenwood build
-- `npm run netlify` - Start the Netlify local dev server
+- `npm run serve:netlify` - Start the Netlify CLI server for testing production Greenwood builds locally (see caveats section in the plugin's README)
 
 > 👉 **Note**: _If deploying to your own Netlify instance, make sure you set the `AWS_LAMBDA_JS_RUNTIME` environment variable [in your Netlify UI](https://answers.netlify.com/t/aws-lambda-js-runtime-nodejs14-x/32161/2) to the value of  `nodejs18.x`_.
 
@@ -27,21 +25,31 @@ This repo aims to demonstrate a couple of Greenwood's features ([API Routes](htt
 
 |Feature    |Greenwood |Serverless|Edge|
 |---------- |----------|----------|----|
-|API Routes |   ✅     |  ⚠️       | ❓ |
-|SSR Pages  | ❓       | ❓        | ❓ | 
+|API Routes |   ✅     |  ✅      | ❓ |
+|SSR Pages  |   ✅     |  ✅      | ❓ |
 
 ## Serverless
 
 The serverless demos include the following examples:
-- ✅ [`/api/greeting?name{xxx}`](https://harmonious-gaufre-bb14cf.netlify.app/api/greeting) - An API that returns a JSON response and optionally uses the `name` query param for customization.  Otherwise returns a default message.
-- ⛔ [`/api/fragment`](https://harmonious-gaufre-bb14cf.netlify.app/api/fragment) - An API for returning fragments of server rendered Web Components as HTML, that are then appended to the DOM.  The same card component used in SSR also runs on the client to provide interactivity, like event handling.
-- ✅ [`/api/fragment-manual`](https://harmonious-gaufre-bb14cf.netlify.app/api/fragment-manual) - Same as the above API, but using WCC in a more "manual" fashion for comparison since Netlify does not support `import.meta.url`.  The WC implementation uses Declarative Shadow DOM and `<slot>`s for composition instead of attributes.
 
 ### API Routes
 
-####  ⛔ import.meta.url
+- ✅  [`/api/greeting?name{xxx}`](https://harmonious-gaufre-bb14cf.netlify.app/api/greeting) - An API that returns a JSON response and optionally uses the `name` query param for customization.  Otherwise returns a default message.
+- ✅  [`/api/fragment`](https://harmonious-gaufre-bb14cf.netlify.app/api/fragment) - An API for returning fragments of server rendered Web Components as HTML, that are then appended to the DOM.  The same card component used in SSR also runs on the client to provide interactivity, like event handling.
+
+### SSR Pages
+
+-  ✅ [`/artists`](https://harmonious-gaufre-bb14cf.netlify.app/artists) - SSR page for rendering Greenwood pages.
+
+### Known Issues
+
+> _**All known issue resolved!  Information left here for posterity**_
 
-Seeing this issue when creating an "idiomatic" example of a custom element using WCC's `renderFromHTML` because [Netlify / esbuild](https://github.com/evanw/esbuild/issues/795) does not support `import.meta.url`, though hopefully it is [coming soon](https://github.com/evanw/esbuild/pull/2508 )? 🥺
+####  ✅ import.meta.url
+
+> _**Note**: Solved by [bypassing Netlify's bundling and just creating a zip file custom build output](https://github.com/ProjectEvergreen/greenwood-demo-adapter-netlify/pull/4/commits/7787bc62cb891169a2c8156c0790f648288cab0b)_
+
+Seeing this issue when creating an "idiomatic" example of a custom element using WCC's `renderFromHTML` because [Netlify / esbuild](https://github.com/evanw/esbuild/issues/795) does not support `import.meta.url`, though hopefully it is [coming soon](https://github.com/evanw/esbuild/pull/2508)? 🥺
 
 ![Netlify invalid URL](./netlify-invalid-url.png)
 
@@ -122,9 +130,7 @@ So although this runs fine locally for `/api/fragment-manual`, when run on Netli
 
 ![Netlify ERR_REQUIRE_ESM](./netlify-err-require-esm.png)
 
-### SSR Pages
 
-TODO
 
 ## Edge
 
@@ -139,8 +145,16 @@ TODO
 TODO
 
 ## Adapter Implementation Thoughts / Questions
-
-1. Will need to generate the _.netlify/functions_ folder on-demand / as part of the build instead of hardcoding, likely from _manifest.json_
-1. How to best manage local dev (runtime "compliance")
+1. [x] Do we even need workers for build output?
+    - if not, how to make a generic solution?  (make a pure `executeModule` function and run the worker ourselves when needed in dev mode?)
+1. [x] Will need to generate the _.netlify/functions_ folder on-demand / as part of the build instead of hardcoding, likely from _manifest.json_
+1. [x] For SSR pages, manual is the only option?  That will impact how pages can be built, e.g. manual card, shadow dom, etc and might to be configurable based on if the platform supports `import.meta.url` or not it seems.
+    - we can get around this using our own bundling solution - https://docs.netlify.com/functions/deploy/?fn-language=js#custom-build-2
+1. [x] How to best manage local dev (runtime "compliance") - mixed support, see caveats section of the plugin's README
     - proxy netlify cli dev option?
-    - should use _src/_ or _public/_?  depends on dev vs production mode?  Interestingly, the manual way only worked deployed when using _public/_
+    - should use _src/_ or _public/_?  depends on dev vs production mode?  Interestingly, the manual way only worked deployed when using _public/_
+    - if esbuild worked w/ `import.meta.url`, we could probably ship unzipped bundles, and then dev would also work?
+1. [x] Need to provide custom _netlify.toml_?
+1. [x] Make sure to spread all headers / response properties in netlify functions adapter output
+1. [ ] SSR pages are bundling into _public/api/_ directory ? 
+1. [ ] Keep it as an experimental feature for 1.0 (or per platform?)
diff --git a/greenwood.config.js b/greenwood.config.js
@@ -0,0 +1,7 @@
+import { greenwoodPluginAdapterNetlify } from '@greenwood/plugin-adapter-netlify';
+
+export default {
+  plugins: [
+    greenwoodPluginAdapterNetlify()
+  ]
+};
diff --git a/netlify.toml b/netlify.toml
@@ -6,9 +6,4 @@
   skip_processing = true
 
 [build.environment]
-  NODE_VERSION = "18.12.1"
-
-[[redirects]]
-  from = "/api/*"
-  to = "/.netlify/functions/:splat"
-  status = 200
+  NODE_VERSION = "18.x"
diff --git a/netlify/functions/fragment-manual.js b/netlify/functions/fragment-manual.js
diff --git a/netlify/functions/fragment.js b/netlify/functions/fragment.js
diff --git a/netlify/functions/greeting.js b/netlify/functions/greeting.js