Static and Serverless Hosting Runtime Adapters

[thescientist13]

Overview

Would like to provide Greenwood with the ability to adapt to specific runtimes / platforms for support Serverless and Edge runtimes like:

• Netlify Serverless / Edge Functions - https://github.com/ProjectEvergreen/greenwood-demo-adapter-netlify
• Vercel - https://github.com/thescientist13/greenwood-demo-adapter-vercel
• AWS Lambda (arc?)
• Deno Deploy
• Cloudflare
• others?

In particular, supporting #1007 , which will vary per hosting provider. The goal would be to support the following as Serverless and / or Edge functions:

1. API Routes
2. SSR Routes (would this need evaluate (remove) use of Workers for SSR and prerendering #1088 )

Details

Main thoughts include

1. One off page routes (see SSR and Serverless experiments [DO NOT MERGE]  #812)
2. Being able to work without a filesystem - Agnostic Runtime #953
3. SSR pages will need access to the request object, no?
4. Do we need single file bundles (SFBs) for SSR page and API routes #1118 ?
5. Consolidate and document build out; manifest.json, resources.json, etc as identified in Enhancement/issue 946 decouple build and serve commands from workspace #1079 including a serializable version of the graph and manifest for SSR (as identified in Enhancement/issue 946 decouple build and serve commands from workspace #1079)
6. better way to "DI" compilation into generated SSR pages instead of through handler in bundle lifecycle? (As identified in Enhancement/issue 946 decouple build and serve commands from workspace #1079) - completed in evaluate (remove) use of Workers for SSR and prerendering #1088
7. Should API and SSR pages have chunks, or be entirely self contained and also minified in rollup.config.js? (As identified in Enhancement/issue 946 decouple build and serve commands from workspace #1079 ) - deferred to single file bundles (SFBs) for SSR page and API routes #1118
8. WCC Enhancements
   • make JSX transformations (and dependencies) opt-in / lazy loaded wcc#116
   • refactor how definitions and entry points are determined (leverage default export) wcc#117
9. Maybe a guide self hosting for greenwood serve?
10. Rehydrate graph in memory

In concert with #953

[thescientist13]

So have been doing a little exploration into this with Netlify Serverless functions
AnalogStudiosRI/www.tuesdaystunes.tv#114

Current takeaways are:

1. Main issue is that import.meta.url is not supported by default, which "breaks" the WCC use case in /api/fragment, but we should hopefully be able to "bundle" this away anyway 🤞
   • Netlify
     • Error because import.meta.url is undefined netlify/cli#4601
     • Allow Functions to be pure ES modules netlify/zip-it-and-ship-it#750
     • URL assets bundling evanw/esbuild#795
   • Vercel
     • Build error when importing a dependency module containing a URL instance with a import.meta.url base vercel/next.js#37031
     • Wrong file path generated when using new URL with import.meta.url as the base. vercel/next.js#39350
2. Users will likely need to add / modify their netlify.toml to include a redirect for /api/* routes, e.g.

   [[redirects]]
   from = "/api/*"
   to = "/.netlify/functions/:splat"
   status = 200

3. For Node 18, will need to manually set the AWS_LAMBDA_JS_RUNTIME environment variable in the UI to nodejs14.x

[thescientist13]

Got an example of Greenwood running on Fly.io
https://github.com/ProjectEvergreen/greenwood-demo-platform-fly

[thescientist13]

Just a heads up that Netlify CLI, specifically esbuild doesn't seem to support import.meta.url :/

Had to do something like this to get it working
https://github.com/ProjectEvergreen/greenwood-demo-adapter-netlify/pulls

await fs.writeFile(outputUrl, `
  import 'wc-compiler/src/dom-shim.js';
  import Page from './_${filename}';

  export async function handler(request) {
    console.log('${JSON.stringify(page)}');          

    let initBody = ${body};
    let initHtml = \`${html}\`;

    if (!initBody) {
      const page = new Page();
      await page.connectedCallback();

      initHtml = initHtml.replace(\/\<content-outlet>(.*)<\\/content-outlet>\/s, page.innerHTML);
    }

    return new Response(initHtml);
  }
`);

[thescientist13]

OK, cutting this off at just Serverless (and static) hosting for now, with plugins ready to land for Vercel and Netlify. Created tracking items for the following

• Edge Runtime support for Adapter plugins #1141
• AWS Adapter plugin #1142
• Cloudflare Adapter plugin #1143