How can I install a private node package using Bubble's Plugin Editor?

I picked up Bubble very recently to see if I could use it alongside my company’s SDK.
This SDK is a private NPM package.

When I create a new server-side action inside a plugin, I know that I can tick the “this action uses node modules” box to add a package into the dependencies. However, this only works with public packages, since private NPM packages need an authorization token to be downloaded, otherwise npm throws an error saying that the required package does not exist.

Is there a place in which I can write down my key/token pair to use my private node package?

I’m not too sure you can. Do you have a script file instead?

One (ugly) option is to bundle your library inside the plugin code

If I use a script file, won’t this script execute only when the page starts loading? I’m still very new to Bubble.

This is the way. For as “ugly” as it is, it’s actually the best way in terms of reducing your SSA’s startup time since you can treeshake said private NPM packages (and really all of the packages you’d need to use). This means you end up with zero dependencies because they’re all already there in your function call. I’ve used this technique to shave 12 seconds execution time off of the Create and Update search record actions in my Scious Search plugin (from an average of 14 or 15 seconds to about 2 seconds).

3 Likes

Small update since my last post - I created a VS Code extension for streamlining Bubble Plugin development. Here’s Bubble’s official announcement for details but, in short, the extension is called Bask and it de-uglifys (as @dorilama called it) the process of bundling private NPM packages into Server Side Actions.

Historically, bundling private or custom packages into SSAs was ugly for a couple of reasons;

  • it would create extra build steps that had to be done manually. Not just once, but everytime you wanted to update/test your code.
  • then, of course, the output itself was quite ugly - if it wasn’t minified, then your SSA code would be very large (and so would run slower). Or if it was minified, then we had the issue of having to manually maintain two sets of Plugin files - our minified ones and our unminified ones (where we actually develop code).

Bask solves those pain points by automatically building and synchronizing code changes to Bubble whenever you save a plugin file in VS Code.