Using Discourse to Collaborate on n8n Workflows

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

The forum software used by n8n, and if you've spent much time online lately, you'll recognize it as a VERY common choice, is Discourse. I'll have to limit this to "pre-requisite" status in this article, but you'll find information about how to get Discourse running here. Once you have that done, and you're logged in as an adminstrator, proceed to the next step.

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. Not a huge challenge, but it will help to see that in action to understand the elements of getting things running in Discourse.

Discourse plugin

After setting up Discourse using the "launcher" script and reading between the lines of their documentation... A LOT!!, I wouldn't say it's the friendliest setup process. Well, ok, the Docker setup is obnoxiously terrible if you happen to be aware of what could have been done with Docker compose instead. Assuming you are now semi-familiar with how and where to configure things in Discourse, the plugin, which is a wrapper for the <n8n-demo> tag part of the n8n-demo component installs from here

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.

1. 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
2. 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

1. Rebuild the Discourse container
   • launcher rebuild app
2. Verify that the plugin is installed.
   • Admin Dashboard -> PLUGINS left-menu -> Installed Plugins sub-menu -> Search "N8n wf"
3. 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.
4. 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
5. Navigate back to the forum
6. 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"
  }
}

```