For the ❤️ of CommonJS and Claudia.js 🙆‍♀️

It has been some time looking at Claudia.js to handle new serverless service deployment to AWS. Previously, I wrote my learnings from deploying Zoom Video SDK Sample Signature App to AWS Lambda using Claudia.

Using Amazon Web Services (AWS) Lambda to set up Zoom Video SDK Signature Generator

Things changed since that last post and guess what?

• Claudia’s last release was March 2022 (Version 5.14.1) with Nodejs 10.x runtime support (AWS Lambda was supporting Nodejs 8.x and 10.x runtimes).
• AWS Lambda Nodejs supported runtime — 18.x, 20.x and 22.x https://docs.aws.amazon.com/lambda/latest/dg/lambda-runtimes.html.
• ECMAScript modules (ESModule) support since Nodejs 12.x runtime.

Setting the context

The codes for Zoom SDK Signature sample app were written in CommonJS — very simple and straightforward. Recently, Zoom releases Cobrowse SDK which enables users to share their web browsing experience with an organization without compromising privacy and security. You can read more about it here from the developer blog post.

Build secure collaborative browsing with the Zoom Cobrowse SDK - Zoom Developers

With a new SDK, it comes with new sample apps for developers to test. Similar to other SDKs, Cobrowse SDK has an authorization flow which requires to initiate and join the Cobrowse session. Zoom has provided a Cobrowse SDK Authorization Endpoint sample for developers to quickly deploy and test, with options to deploy to managed services (but no AWS Lambda).

GitHub - zoom/cobrowsesdk-auth-endpoint-sample: Generate a Cobrowse SDK JWT to join Zoom Cobrowse…

Being the avid supporter of Claudia, my first instinct was to leverage the same approach to deploy to AWS. However, this sample app was written in ESModule (it make sense!).

What now?

I was lazy to relook at deploying the express app to AWS Lambda (manually) and contemplated with a couple of approaches:

• Deploy as per the provided sample app to AWS.
• Rewrite the entire sample app just for Claudia deployment.
• Ask ChatGPT for help.

Well, it was a mix of ChatGPT and looking at the current code to settle on ESM to CJS conversion using Babel.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Babel · Babel

In a nutshell, this is how Babel handles the conversion under the hood:

1. Parses the Code:

Babel parses the ESM code into an Abstract Syntax Tree (AST) using a parser like @babel/parser.

2. Transforms the AST:

Babel applies transformations (via plugins like @babel/plugin-transform-modules-commonjs) to replace the import/export nodes in the AST with equivalent require/module.exports nodes.

3. Generates the Output:

The transformed AST is converted back into JavaScript code using a code generator.

Setting up Babel in the sample app

In the sample app, install Babel dependencies using npm or yarn with the following command:

npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-modules-commonjs

Next, create the Babel configuration file (babel.config.json) in the sample app. Add the following configuration to tell Babel to use the @babel/plugin-transform-modules-commonjs plugin:

{
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

Run Babel to transform the codes from the srcdirectory using Babel CLI to convert the ESM code into CommonJS and output them to the dist directory.

npx babel src --out-dir dist

Volia! All the ESM codes from the the srcdirectory are now converted into CommonJS output into dist directory.

Once this is completed, you can follow the same steps from my previous post using Claudia.

Wait… Small Tweak to Claudia

As mentioned, the current (outdated) version of Claudia support Nodejs 10.x runtime support which is already deprecated for AWS Lambda.

To handle the runtime version, you can define the --runtime argument when creating the function. You can run the “new” command:

claudia create --runtime nodejs18.x --handler lambda.handler --deploy-proxy-api --region ap-southeast-1

You can alternatively locate and change the runtime property in Claudia.js by locating the claudia.js.

And the rest of the steps are the same as my guide (including environment variables etc.).

Final words

What an evening trying to convert a perfectly packaged sample app for my own stupidity. But hey, it works for my comfort and interesting going down this rabbit hole to learn something new.

The opinions and views expressed here are those of my own and do not necessarily state or reflect those of Zoom Communication Inc.