AWS : Calling Rest API with IAM authentication from Node.js vs from browser javascript

So new to JavaScript and trying to wrap my head around libraries and all.

I have an AWS API Gateway, with IAM authentication enabled. I want to hit it from my browser using JavaScript. In order to do that, I need 2 external libraries, namely: @aws-sdk/signature-v4 and @aws-sdk/sha256-js.

Now in my local node server, I can do an "npm install" for the required packages and straight away use it using "require" statements, like this:

// JavaScript source code

const express = require('express');
const app = express();
const port = 3000;
const axios = require('axios');
const SignatureV4 = require('@aws-sdk/signature-v4');
const sha256 = require('@aws-crypto/sha256-js');



API_URL
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY


const apiUrl = new URL(API_URL);



const sigv4 = new SignatureV4.SignatureV4({
    service: '#Service-Name#',
    region: '#Region-Name#',
    credentials: {
        accessKeyId: AWS_ACCESS_KEY_ID,
        secretAccessKey: AWS_SECRET_ACCESS_KEY
    },
    sha256: sha256.Sha256,
});

const handler = async () => {
    const signed = await sigv4.sign({
        method: 'GET',
        hostname: apiUrl.host,
        path: apiUrl.pathname,
        protocol: apiUrl.protocol,
        headers: {
            'Content-Type': 'application/json',
            host: apiUrl.hostname, // compulsory
        },
    });

    try {
        const { data } = await axios({
            ...signed,
            url: API_URL, // compulsory
        });

        console.log('Successfully received data: ', data);
        return data;
    } catch (error) {
        console.log('An error occurred',error);

        //throw error;
    }
};


app.get('/', (req, res) => {
    handler().then((result) => {
        res.send(result);
    });
    
    
});

app.listen(port, () => {
    console.log(`I am listening at http://localhost:${port}`);
});

Now, I can't seem to get started on the browser side. Apparently require won't work on browser javascript (at least it threw an error for me), so I started exploring using ES6 import. For that, after some reading, I figured to use some cdn servers to get my required packages, but the cdn for aws-crypto is broken ( https://cdn.jsdelivr.net/npm/@aws-crypto/sha256-js@4.0.0/+esm this gives me an import error: "Cannot read properties of null (reading '__exportStar')
" )

So it got me thinking, I have the required libraries in my local node folder, can't I somehow package them into ES6 modules and use it in my webpage..? But I don't know how to do that, in fact, I don't even know if I am on the right track. So any help would be appreciated....Thanks.

Finally got it working. So mentioning in case anyone faces a similar problem.

So, after reading around I found out about "Browserify". It basically bundled the different "require" packages recursively into a single JS file, which I later embeded into my html page with the script tag.

Also, I used @aws-amplify/core package for signing as it was a bit easier and it worked in my browser application.

So to summarize, I did the following steps:

1. Browserified the following script into a custom bundle:

   const amp = require('@aws-amplify/core');
   global.window.signer = amp.Signer;
   

2. Included the custom bundle in my web app (the bundle size is 1.5MB, will have to figure out to minimize it if possible)

3. Now that the amplify's "signer" function was available in the global scope, I simply used it as mentiond here

So, although I got it working this way, if anyone has a better idea, I would love to hear them out.