Hot to make the Sample Admin plugin work (Noob)

Hey guys,
I’m totally new to Speckle environment, and I’m trying to understand the structure of the plugins
For that, I have Speckle server running on a docker container, from the image at speckle/speckleserver

The container is running fine, and I’m able to log in and see the Admin page.
Then I have created a simple plugin-ExamplePlugin.vue for the Admin, as showed here
Copied it to /usr/src/app/plugins/admin/src/plugins

Then I have restarted the server, killing the /usr/local/bin/node /usr/src/app/server.js process, which seems to spawn another instance.

But when I navigate to the SpeckleAdmin Plugins page, I still don’t see anything except for the message:

Hmm, we didn’t find any speckleAdmin plugins… Are they registered in your /plugins folder? :thinking:

It’s probably something very obvious that I’m missing, but I can’t figure out.

Does anyone can point me to the right direction on how to solve it?

Hey @danielfranca! To get it out of the way, I’ll assume that you’ve read the guide on front end plugins.

To be transparent: I’ve never tried it with the docker container route. I always expected that SpeckleAdmin will be an independent app, with its own CI/CD, deployed in a separate manner than the server itself, but was unsure of the route. You can see the results, confusing deployment scenarios :confused:

Step 1: How I would test it: clone the speckle admin locally, and start a dev server (npm run dev afaik). Add your plugin component - it should there after show up in your localhost. You can connect the local app to your local server (running wherever it runs). This would be step one, and it would validate that your plugin actually works.

Step two, I would run inside the docker container, after you’ve copied the plugin .vue file in the correct spot, an npm run build inside the SpeckleAdmin folder. Plugins are not loaded dynamically unless you are in dev mode (and we’ve got webpack hot reloading things); the server just serves SpeckleAdmin from its build directory.

Step three: let’s see them console output; hopefully won’t be needed though :slight_smile:

Does this make sense? As a PS, quite curious what you’re planning to build!

1 Like

Thanks @dimitrie
That worked nicely

One question, am I missing something or this frontend guide is limited to that very simple example?
For example, I had to debug and log myself to figure out what is in the state object.

When developing, you can use the rather nice vue debugger (chrome/firefox extensions) to inspect the application, including the vuex state. Hope this helps!