Forum Academy Marketplace Showcase Pricing Features

Using npm library client side

I have a client side npm library I need to use.

The library calls a client side chrome extension so needs to be run client side.

I normally do my node work in a separate API.

Where is the best place to put this?

By creating a plugin. You’ll have access to create a client side action to then use in your app.

Bubble’s Server Side actions support NPM packages directly but it sounds like you want access to it client side. For that you can use https://unpkg.com to load the package via a <script> tag within the header of your plugin element, or you could save the package locally and then upload it via the Shared tab in your plugin.

2 Likes

Yes, exactly - thank you - I will check this out.

I am getting a little backwards here…

@edwardbutcher - can you import the types like in Node using unpkg?
For example
import { HashConnect, HashConnectTypes, MessageTypes } from ‘hashconnect’;

I am using unpkg in the plugin shared header. When I click on the link - it looks fine. How do you to the above on the client side - I am using a Element Action.

Nevermind - just reference the files directly instead of the whole package. I think I got it.

Ah, with you.
Yes looking at the package it’s quite a maze of dependencies… unpkg (I think) just gives you cloud hosted access to the contents of each package, but doesn’t take care of Imports and Exports within a package the way true Node will.

So you probably want to:

  1. Install the Node package / libraries that you need into a Node environment locally
  2. Write a simple JS file that Imports together all the libraries (in the right order) that you need.
  3. Use a compiler like esbuild - Getting Started or Webpack to stitch together the various parts into a single JS file that combines all dependencies (there’s a nice example of this on the esbuild website linked before)
  4. Upload that file as a resource to your plugin and bring it in via the Header

Hope that makes sense. I’m assuming you can navigate the smaller waypoints between these steps but shout if you need more.

3 Likes

I think you are right - especially since I have typescript in that build. esbuild will probably take care of it. Going to try here.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.