Posted on Oct 1 • Edited on Oct 5

Using Discourse to Collaborate on n8n Workflows

#discourse #n8n #docker #collaborate

This should have been simple to set up, and if it were, I wouldn't be writing this. If you've spent any time on the n8n community forums then you've probably seen a really nifty feature where a forum post will render a workflow, right in the post, as if you had a mini-n8n instance embedded there to let you poke around in the workflow-node settings, copy part of the posted workflow for your own use, zoom in and pan around to take a closer look at things, etc. That's interesting on its own, but you can also set that up for your own internal purposes. For instance, if you wanted to enable a development team to share tips and workflow fragments that cannot (or should not) be shared on a public forum, you could set up a private instance of the same software n8n uses for their community forums.

Enough about the what and why... on to the how...

Discourse

Discourse is the software used by n8n for their community forums, and if you've spent much time searching/reading online discussions lately, you'll recognize Discourse as a VERY common choice. I'll have to limit the coverage of installing Discourse to "pre-requisite" status in this article, because the Discourse install/setup is a convoluted mess that has already been argued to death and it just can't be summarized into a few simple steps. However, you'll find information about how to get Discourse running here (good luck). Once you have that done, and you're logged in as an administrator, you're ready to continue setting up the n8n-demo component and plugin.

n8n-demo component

Before jumping through the hoops to integrate the demo component into your Discourse server, it will probably help to check it out standalone. To do that, you just need to grab the source JSON from a workflow in n8n, and follow the instructions here. Getting that working amounts to adding a few <script> tags and a <n8n-demo> tag to an html page, and loading it in a browser. This isn't a huge challenge, but it will probably help to see that in action to understand better how the component works within Discourse.

Discourse plugin

The discourse-n8n-wf plugin is a wrapper for (part of) the n8n-demo component, which enables it in a Discourse forum post by intercepting the handling of a markdown code-block. Getting the plugin installed and configured in Discourse required quite a bit of guessing and reading between the lines in the Discourse documentation and the plugin documentation (which is a bit sparse). Also, heads up, the plugin is only a wrapper for the <n8n-demo> tag part of the n8n-demo component; the <script> tags need to be configured separately in the Discourse admin dashboard to get everything working.

Steps

I couldn't find anywhere that had all of this in one place, so that's the main point of this article. Hoping this serves to eliminate some head scratching (or pounding) for someone.

Set up Discourse, register the admin login, and be sure you can get to the Admin Dashboard
- Click your Avatar -> Click the Discourse UI -> Avatar -> person icon -> Preferences -> Admin button -> Click Preferences -> Click the Admin button
Add the plugin to the Discourse app.yml (find this block, and add the last line shown here)

hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/n8n-io/discourse-n8n-wf.git

Rebuild the Discourse container
- launcher rebuild app
Verify that the plugin is installed.
- Admin Dashboard -> PLUGINS left-menu -> Installed Plugins sub-menu -> Search "N8n wf"
Configure the plugin in 2 places, neither of which is in the grayed-out "Settings" button on the "Installed Plugins" list item.
- Admin Dashboard -> SECURITY left-menu -> Security sub-menu -> filter: "iframes"
- Add an "Allowed iframes" item with https://my-n8n-server.example.com/workflows/demo
  - the /workflows/demo part is fixed
  - match the protocol (http or https) and host name to your own server.
- Admin Dashboard -> All site settings left-menu -> filter: "N8n-core-url"
- Fill in just the base URL matching the "Allowed iframes" URL above, like https://my-n8n-server.example.com
- Note: Couldn't find a way to navigate directly to this setting, so it's sorta hidden / hard to find.
Add a theme "component" to all themes with the script tags for the n8n-demo component
- Admin Dashboard -> APPEARANCE left-menu -> Themes & compo... sub-menu -> Components "tab"
- Click Install button
- Click + Create new option
- Enter Name: n8n-demo component (or a similar name you like with at least 4 characters apparently)
- Leave "Component" selected as the type.
- Click the Create button
- Click Add all themes and then the green check button.
- Click the Edit Code button
- Switch to the <head> tab
- Paste in the script tags from here
- Click the Save button
Navigate back to the forum
To verify that the rendering component is working, create a post with workflow JSON enclosed between 2 separate lines with the markdown code-block (3-back-tic) delimiters like:

```

{
  "nodes": [
    {
      "parameters": {},
      "type": "n8n-nodes-base.manualTrigger",
      "typeVersion": 1,
      "position": [
        0,
        0
      ],
      "id": "ad04e21c-5d86-4463-8f03-0cd375224997",
      "name": "When clicking ‘Test workflow’"
    },
    {
      "parameters": {
        "url": "https://httpbin.org/get",
        "sendQuery": true,
        "queryParameters": {
          "parameters": [
            {
              "name": "pure",
              "value": "magic"
            }
          ]
        },
        "options": {}
      },
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 4.2,
      "position": [
        220,
        0
      ],
      "id": "10394cdf-c137-4cc9-8f17-c1510bb5380b",
      "name": "HTTP Request"
    }
  ],
  "connections": {
    "When clicking ‘Test workflow’": {
      "main": [
        [
          {
            "node": "HTTP Request",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  },
  "pinData": {},
  "meta": {
    "instanceId": "1234"
  }
}

```

Rendering On Your Own n8n

By default, the n8n-demo tag generated by the n8n-discourse-wf plugin submits the workflow source to https://n8n-preview-service.internal.n8n.cloud/workflows/demo, via iframe, to be rendered in graphical (editor) form. Not only is this a potential "leak" of your workflow data, but it consumes resources that n8n hosts to support their own community forums, and is an external element over which you have no control, for capacity, availability, or security. There is currently no official, documented way to override this, but it should be possible to change the src attribute and point it instead to the URL specified in the N8n-core-url / Allowed iframes settings mentioned above. I'll add an update here when/if I find a way to do that. Please leave a comment if you find a way.

UPDATE: When Discourse installs the plugin, it clones the files from a git repository. One way to override the src attribute in the <n8n-demo> tag is to fork the plugin repo and edit the code to hard code the URL of the n8n instance where rendering should be done.
UPDATE: There is an environment variable that tells n8n to run in "preview mode" here which is necessary to make the /workflows/demo URL path work without requiring a login.

DEV Community