How to test plugins offline without too much refactoring

Plugin builders
1

Working on my first Bubble plugin I successfully managed to create a first working version using the online editor.

Given that the plugin deals with data visualisation most of the work is going to be about defining how html elements are positioned and styled.

I connected my plugin with Github hoping to code and test locally and only synch and test online when testing Bubble integration.

I’m finding it hard to set up a local environment in a way that it doesn’t require too much refactoring or cut/pasting from one js file to another.

Here’s an example:

This is the initialize function in the Bubble editor:

function (instance, context) {
var div;

  div = $('<div class="chart"></div>');
  
  instance.canvas.append(div);
 
  
}

Once synced through GitHub this is replicated as code within initialize.js
14

The problem is that it cannot be run as is locally, probably because in Bubble this code is wrapped in an initialize function.

This holds true for other functions as well.

So the question is:
Is there a way to keep the essential local and remote code identical and still be able to test the parts of the app that do not require interaction with Bubble?

Also: are there any potential issues in adding extra js files that are not defined in the editor in the same folder?

Any help appreciated :wink:

2

one thing that might help you is the PlugBubble plugin. Create a quick little app with input fields and go button… when go is clicked run custom code block using the inputs as the code block. Think of it like you own plugin builder but literally sitting on the live end use environment.

3

Thanks for the tip.
Would this avoid having to copy/paste code blocks across the different JS files before syncing through GitHub or copy/pasting to input blocks inside the Bubble plugin editor when I need to test Bubble integration (for example using data from the Bubble DB )?

Also it seems this method will not solve the efficiency problem of having to reload the page very often, an issue that I’m trying to eliminate by testing locally.

4

It wont solve all your problems although you can in less than 2 mins be testing you code in a live case sense with the beowsers dev console open… currently it takes that long to wait for the builder to auto save, then reload your app, then reload the preview… well nearly… :slight_smile: