Lambda functions with ESM - javascript

First of all, I am a Node newbie, moved from PHP development, so the question may be dumb..
I am in the process of developing a webservice using node with ESM ("import" syntax).
Now I am trying to build some microservices to do background operation using Lambdas with SQS as a trigger and Serverless framework as a deployment tool..
Now that I deployed the first Lambda, I realised ESM syntax isn't supported by Lambda but all services / factories are in ESM syntax already..
What's the best way to manage this lambda function based on services in ESM syntax?
And how do you deal with the common services used in both web service and lambda package?
I don't want to duplicate to both projects in IDE if that makes sense.
Hence, I was hoping to place this serverless framework in the same folder and manage it from there, but unsure if this is the best way to move forward..
If I used 'Typescript', which I haven't had a chance to explore yet due to the deadline of the project, would I not have faced this issue with Lambda deployment?

With Serverless Webpack you can have both ESM and TypeScript support.
For common services, you can consider publishing them as packages, installing them directly from GitHub URLs or just place everything in the same repository and import them directly, whatever works best for you.

Related

How to bundle a plugin based javascript platform

I'am trying to achieve a plugin system for my typescript SPA, but I'am not sure how to approach this in terms of code bundling/splitting.
Current setup
The frontend and backend is implemented with Typescript / ESM.
Frontend:
Vuejs 3
Vitejs/Rollup
Pinia
Backend/API:
NestJs with Express/RestAPI
The app currently consist of 3 npm packages:
Server: NestJs Server Application
Web: Vuejs Frontend / UI Components
Common: Shared models and interfaces and utilities between frontend and backend
Requirements
I want to enable third parties to implement additional modules for this platform installable e.g. via NPM or ideally by just copying the module into a modules directory or some kind of marketplace in the future.
A third party module should be able to import and use classes from the core frontend/backend and common packages similar to the core modules itself. For example, a third party module should be able to access services/models/ui-components and stores of a core calendar module.
Ideally this should work without the need to rebuild the whole frontend/backend. I'am coming from languages like Java and PHP in which you have namespaces, packages and classloaders. I'am not sure how to bundle something like this in a javascript
application especially for the frontend.
So my questions are:
How to bundle/split the core packages
How to import core packages within third party modules
How to build, bundle/split the third party packages
I assume I have to somehow add those core dependencies as externals within the third party module and provide the core bundles as UMD or ESM.
Would be great if someone could point me in the right direction and can provide me with some hints, resources, best practices or even existing/similar solutions.

Using Netlify Serverless Functions With Parcel

I built a client-side modular weather app by using Openweathermap API and Javascript. Since it's client side it sends the API key to user. So I found Netlify's serverless functions to hide my API keys but couldn't figure out how to use it with Parcel. I use Parcel as a bundler and it seems impossible to me using serverless functions with Parcel. Because it bundles everything into one big file but serverless things should be seperated. I did some research and fortunately there are resources for serverless functions but couldn't find anything for that exact situation. So I'll be grateful if I find a solution for this problem.

How to use an npm module in angular

I've been trying to use a npm module called solc in AngularJs but I can't seem to succeed in anyway.
I know it's meant to be used with a Node application but I was wondering if there is a way to use it client side.
I've been trying to use Require.js and require every file included inside the git-repo but there are too many dependencies so I was wondering if there is another way.
I've been looking at browserify but that doesn't seems to do exactly what I need.
Does anyone have any idea?
You can use a npm package in browser applications if the package does not have any dependency on Node's built-in APIs. That's because Node APIs are available on server side and not on browser.
If you see here and here in the github repo of solc, you will see that it requires Node's built-in modules path and https. So it will not work in any browser application.

Can you use a npm package without using NodeJS

I found a library on github that I would like to use but the download instructions only mention using npm but I am not using a NodeJS project (just a basic html,css,javascript front-end with no back-end server). Am I still able to use that library or is it a lost cause? Is there another way to download it without using npm?
Is there another way to download it without using npm?
If it's on github, then you can checkout or fork the repository as you can with any other git repo.
Am I still able to use that library or is it a lost cause?
Whether or not the library will work without Node will depend on the library.
If it presents itself as a Node module, then you'll probably have to modify it (or find a compatible module loader for browser-side JS).
If it depends on NodeJS features (such as the filesystem API) then you'll be out of luck (unless, for example, you polyfill them to work across HTTP)
If you use a build tool such as browserify, or webpack, you can author scripts that require node modules and the build tool will generate a script that includes all the necessary dependencies (assuming that the necessary dependencies are compatible with client-side JavaScript environments).
Downloading dependencies would still be done via npm, but only for local development. Your server would only need the generated script.
Alternatively, if the script is on github or any other repo online you may be able to download it directly. Many modules are published using UMD, which would allow you to use the script using various inclusion methods.

Loading modules in qooxdoo desktop (browser environment)

I'm struggling how to integrate client-side modules like - just as an example - Apollo Client
into the qooxdoo-specific generate.py workflow so that they become available in the browser.
According to the installation notes:
To use this client in a web browser or mobile app, you'll need a build system capable of loading NPM packages on the client. Some common choices include Browserify, Webpack, and Meteor 1.3. [...]
Side note: I currently use Babel 6 to recursively transpile all my sources from a separate folder source.es6/ into the "official" source/ folder, which is then watched and processed by generate.py. Is it possible to use this somehow as a solution to my question?
OTOH, I would love to see at least some kind of integration with Webpack, Browserify or SystemJS.
I suggest you do the following. First, create a loadable package(s) from the Apollo Client and its dependencies, e.g. using Webpack. Then make sure these package(s) are loaded in your web page before you load your qooxdoo app. Then the Apollo API is available to your qooxdoo code.
If you choose to deploy the Apollo packages with <script> tags you can let generate.py do that by using the add-script config key.
I suggest you place the output of the Webpack run in your qooxdoo project's resource path and add #asset hints for those files in your main qooxdoo class. This will make sure they are copied into the build version of your app, and you can use the relative URI to these files, either in your index.html directly or in the add-script config settings.
I don't think your transpiling with Babel6 will help here. The Apollo code is already consumable and you woudn't want to disect it and make it part of your qooxdoo (es6) source tree, let alone its dependencies. I would rather treat it as a shrink-wrapped JS library as I described that is added like a resource.

Categories