Load assets accompanying a Javascript from a remote location

Question

We are running 2 servers. Server 1 hosts a react application. Server 2 hosts a webcomponent exposed as a single javascript bundle along with some assets such as images. We a

Answer 1

If you download your Web Component via a classic script (<script> with default type="text/javascript") you can retrieve the URL of the loaded file by using document.currentScript.src.

If you download the file as a module script (<script> with type="module"), you can retrieve the URL by using import.meta.url.

Parse then the property to extract the base path to the Web Component.

Example of Web Component Javascript file:

( function ( path ) {
    var base = path.slice( 0, path.lastIndexOf( '/' ) )

    customElements.define( 'my-comp', class extends HTMLElement {
        constructor() {
            super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = `<img src="${base}/image.png">`
        } 
    } )
} ) ( document.currentScript ? document.currentScript.src : import.meta.url ) 

Answer 2

How about uploading all required assets to a 3rd location, or maybe an AWS S3 bucket, Google Drive, Dropbox etc.? That way those assets always have a unique, known URL, and both teams can access them independently. As long as the names remain the same, so will the URLs.