Host a file within n8n

Hello,

I have a weird situation, due to CORS i want to put a basic HTML at the location where n8n runs.

something like

https://mydoma.in/workflow is where n8n runs
I need to put a HTML file at
https://mydoma.in/xxx.html

is there a way to achieve this by putting the HTML physically in a folder?

Hi @Bahadur, n8n does not come with its own webserver, so there are some limitations around this. You could however build a small workflow consisting of a Webhook node and a Set node that returns HTML websites.

This was an idea presented at our community meetup in April this year. An example workflow would look like this:

{
  "nodes": [
    {
      "parameters": {
        "path": "6bd61288-225b-403f-b7e5-ba4dc785abdb",
        "responseMode": "lastNode",
        "options": {
          "responseContentType": "text/html",
          "responsePropertyName": "response"
        }
      },
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1,
      "position": [
        450,
        300
      ],
      "webhookId": "6bd61288-225b-403f-b7e5-ba4dc785abdb"
    },
    {
      "parameters": {
        "values": {
          "string": [
            {
              "name": "response",
              "value": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <title>Hello, World!</title>\n</head>\n\n<body>\n  <h1>Hello, World!</h1>\n</body>\n</html>"
            }
          ]
        },
        "options": {}
      },
      "name": "Set",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        650,
        300
      ]
    },
    {
      "parameters": {},
      "name": "Start",
      "type": "n8n-nodes-base.start",
      "typeVersion": 1,
      "position": [
        250,
        300
      ]
    },
    {
      "parameters": {
        "path": "6bd61288-225b-403f-b7e5-ba4dc785abdb",
        "responseMode": "lastNode",
        "options": {
          "responseContentType": "text/html",
          "responsePropertyName": "response"
        }
      },
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1,
      "position": [
        450,
        300
      ],
      "webhookId": "6bd61288-225b-403f-b7e5-ba4dc785abdb"
    },
    {
      "parameters": {
        "values": {
          "string": [
            {
              "name": "response",
              "value": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <title>Hello, World!</title>\n</head>\n\n<body>\n  <h1>Hello, World!</h1>\n</body>\n</html>"
            }
          ]
        },
        "options": {}
      },
      "name": "Set",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        650,
        300
      ]
    }
  ],
  "connections": {
    "Webhook": {
      "main": [
        [
          {
            "node": "Set",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

Now when visiting the webhook URL with a browser, an HTML page is served. Hope this helps!

Thanks @MutedJam , but this won’t work (for my purpose). I tried to post as quickly as possible, so didn’t give proper background.

When I send a AJAX request from within a page on xxx.yyy.com (which I own) to n8n.yyy.com webhook, I’m getting CORS errors. The ideal solution to this is posted as having a proxy in front of n8n, which I don’t have and can’t quickly solve.

I’ve found a workaround on GitHub - jpillora/xdomain: A pure JavaScript CORS alternative, which requires me to put a proxy.html on the n8n.yyy.com root.

Are you running n8n in a container or directly? The problem you will have is there isn’t a standard web server running for n8n so a workaround won’t be easy the quickest option that I can think of would be to set up a proxy which can be done in about 15 minutes.

Although that does depend on the environment and how things are configured.

Hi @jon ,

directly, from npm install.

I’ve fiddled a bit and guess n8n is using Express as the webserver, I was thinking perhaps there is an actual physical path that Express is using or at least could be added as an option in some config.

I did setup proxies or nginx just to give them a try back in the day, but I lack the necessary background for proper reverse proxy or nginx configuration.

I guess playing with express is the next option but you would need to make the changes to that to get it working.

You could try the docker setup that uses Traefik that has everything preconfigured so should just work.

Thanks @jon , perhaps Docker is the most logical way to go and I would’ve done that if it was the first installation phase, but I have setup several processes that depend on n8n so far, I don’t want to risk breaking anything due to different setups :slight_smile:

1 Like

Hey @Bahadur,

That is going to cause a bit of an issue then, I guess the only option left is to mess with the express routing to do what you are after although migrating to docker could probably be done with very little downtime. If you are insterested what I would do is…

Set up docker
Create compose files (Keep the OS bind port to something different like 8001)
Export workflows from current running instance
Import workflows on docker instance and credentials
Test the workflows using the 8001 port

Now when you are ready for the swap over…
Stop the current instance
Change the port in the compose file so it is the same as your existing instance
Restart the container
Verify it is still working

In theory the downtime would be minimal as you have tested everything before and all you are doing is stopping one instance and starting the other on the old port.

If you decided to use something like Postgres or MySQL when setting up your current environment though the process would be a lot easier and quicker as you won’t need to export / import workflows you can just builld your compose files point to the current database stop the current instance and fire up the containers and you are good to go.

1 Like