What’s the deal with NPM and Bubble fam? How does ya boy do it?
I need to quickly become an advanced plugin builder and then be able to load them into there?
Is there really not a way to get them poppin inside our standard apps and templates?
Drop some tasty knowledge here 
Read posts by this guy: @vini_brito
And read free / open source plugin code like this one: Plugins | Bubble
You’re awesome trouble, thank you, I’m on it.
{
“dependencies”: {
“puppeteer-core”: “latest”
}
}
Like this. Change “puppeteer-core” to your dependency
Additionally, bubble will package itself once you declare something like
const pupp = require(‘puppeteer-core’);
Appreciate the List Shifter shoutout, @bubble.trouble! Unfortunately, List Shifter isn’t a super-helpful example as (1) the bulk of the code is minified (it has to be delivered this way because Bubble’s minifier doesn’t handle the code properly) and (2) it is an element plugin and it sounds like @vadim.vozmitsel might be most interested in Server Side Actions. List Shifter does illustrate how to configure your main interface, element actions, exposed states, etc.
However, my open source List Popper and Friends plugin is a collection of simple server-side actions that is a very good introduction to how you might write simple SSAs (which can easily include NPM modules).
For a look at how I build element plugins, a good simple example is Fielder, which is pretty simple and shows how I put the bulk of the code in initialize. (It seems like this is the approach followed by most plugin devs.)
Thank you Doug, do you have a link to share on how to set this up in more detail? These dependency statements would need to go into the header in settings or inside the HTML in properties editor on pages? I’m happy to dive into a couple of hours of studying, just not sure which course to follow and am on an extreme time crunch. I just started learning JS last month so I’m still very green with the coded/scripted side of Bubble and programming at large.
Hi Keith, this is great as well, thank you for chiming in . I’d love to ask for your wisdom as well as I did with Doug, do you have a link or two that gives a good overview of how this works?
I’m not new to Bubble but I am to JS and the entire coded/scripted SDLC so while I’m starting to get comfortable with JS, the full ecosystem of how to work in Git based environments is not crystal clear to me. I know this will be a long learning journey but I have a use case that I need to implement ASAP so I was hoping to be able to get going fast.
What I am doing is this:
I would like to use the new Uploadcare uploader that can be found here: Blocks by Uploadcare
I’m clear on the API side of things but am struggling to understand how to work with external packages inside Bubble. I’ve used the JS Toolbox plugin before, so is this plugin needed when doing stuff like this? Where do I actually unpackage or add the script tags for the dependencies that I am after?
Let’s say that I want to use a module called fetch to create http requests.
I’d first declare a variable that creates an instance of my module and allows bubble to run an install command in the background.
// Import the required libraries
const fetch = require(‘node-fetch’);
// Set the URL for the HTTP request
const url = ‘http://www.example.com’;
// Set the options for the HTTP request
const options = { method: ‘GET’, headers: { ‘Content-Type’: ‘application/json’ } };
// Send the HTTP request with fetch
fetch(url, options) .then(response => response.json())
// Convert the response to JSON
.then(data => { // Handle the response data here }) .catch(error => { // Handle any errors here });
If you’re just needing some client side libraries, you should be able to use something like this in your header
< script src="…/myDirectory/myFile.js"></ script>
Hi @doug.burden . Could you share how to go about same thing if the module is on a particular URL?
Also, the SDK that I am trying to integrate has some nodejs files. I am uploading those files in Files in Root Directory section in Settings > SEO/Metatags page in my editor.
I wonder how I can refer those files as modules. Also, would you know if I can simply access these modules via Server script of Toolbox Plugin and avoid having to create plugin for integrating an SDK and executing some files. Would you know?
