Meteor server api using iron router returns HTML not the response

I have a simple Meteor app just the basic meteor create test. I want to be able to route traffic to the "/" directory to a template.

I want to be able to route data from a facebook web-hook to a simple js response.

My issue is that when I fire the web-hook URL using postman it returns HTML and not my response.

I've tried many different options for other posts I have read but now have the most basic version to just get it working.

Here is the code I've used

main.html

<head>
  <title>test</title>
</head>
<body>
</body>

<template name="home">
  <form class="new-message">
    <input type="text" name="message" placeholder="Testing">
  </form>
</template>

main.js:

import { Meteor } from 'meteor/meteor';
import { Router } from 'meteor/iron:router';
import { Template } from 'meteor/templating';
import './main.html';

Router.route('/', function () {
  this.render('home');
});

Router.route('/webhooks/facebook', function() {
    var request = this.request;
    var response = this.response;
    
    response.end('webhook was called');
  }, {
    where: 'server'
  });

All other files are exactly how they are created with meteor create.

I'm on Meteor version 1.8.1

I'm using postman to test the web-hook this is the created GET URL: https://------.ngrok.io/webhooks/facebook?hub.verify_token=mytoken&hub.challenge=1234567&hub.mode=subscribe

code omitted to keep ngrok from getting slammed.

This is the response I'm getting:

<html>

<head>
    <link rel="stylesheet" type="text/css" class="__meteor-css__"
        href="/merged-stylesheets.css?hash=6b1f9f6fb78291ae58da8ec4f36476931155453c">
    <title>simplechat</title>

</head>

<body>
    <script type="text/javascript">
        __meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.8.1%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22development%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22autoupdate%22%3A%7B%22versions%22%3A%7B%22web.browser%22%3A%7B%22version%22%3A%22b22f1ad86c0a904c992885256b7de72ed2863e1d%22%2C%22versionRefreshable%22%3A%22a580e09175421ec6994fc6da61a0413f3a15d2b1%22%2C%22versionNonRefreshable%22%3A%22fc4ded0006de942fe57524f94d500abeb4569d6f%22%7D%2C%22web.browser.legacy%22%3A%7B%22version%22%3A%222571a76ffc344fbc5b40ade303255cbbc59e2682%22%2C%22versionRefreshable%22%3A%22a580e09175421ec6994fc6da61a0413f3a15d2b1%22%2C%22versionNonRefreshable%22%3A%22dc1e886b7786e303655c010220e9f502e82dcf1c%22%7D%7D%2C%22autoupdateVersion%22%3Anull%2C%22autoupdateVersionRefreshable%22%3Anull%2C%22autoupdateVersionCordova%22%3Anull%2C%22appId%22%3A%22zqskgg1xifoj.hlnqbjmcma6f%22%7D%2C%22appId%22%3A%22zqskgg1xifoj.hlnqbjmcma6f%22%2C%22isModern%22%3Afalse%7D"))
    </script>

    <script type="text/javascript" src="/packages/meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d"></script>
    <script type="text/javascript" src="/packages/meteor-base.js?hash=29010b127daf4ebacaaf9db9b8a61487e57d7d86">
    </script>
    <script type="text/javascript" src="/packages/mobile-experience.js?hash=2751f9ec11102d1106042c462b340c3fcfcb1990">
    </script>
    <script type="text/javascript" src="/packages/modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e">
    </script>
    <script type="text/javascript" src="/packages/modules.js?hash=e8b7455d5562fec1444a3c6882cdc6639055cfca"></script>
    <script type="text/javascript" src="/packages/modern-browsers.js?
    <script type="text/javascript" src="/packages/autoupdate.js?hash=6d56c0f3a885390c688b4f3f893d96d1280fd0ee"></script>

---- Cut out all of the other script calls to keep this short -----

    <script type="text/javascript" src="/app/global-imports.js?hash=1f8a1ae2e343994912f72f1dc6eec1ca7df24cae"></script>
    <script type="text/javascript" src="/app/app.js?hash=70cfa37cd2f85e533f69d7312d02ef8984eae01a"></script>

</body>

</html>

So basically it returns HTML.

I'm sure I'm missing something simple.

Usually I wait till I have exhausted all other options before posting here. And I'm sure I have tried every other example given here on Stack Overflow.

My desired result is simple to just return a HTTP response "webhook was called" instead of the HTML garbage.

Solution

For others who have been struggling getting both server and client routes to work on the same Meteor app here is the solution.

Iron routers newest version requires all server side routes to be on the server side and you must fire them from the startup.

All client routes are added on the client side and included in the main.js on the client side.

My simple test was this:

meteor create test

Then in clients/main.html replace the current code and add a simple template as follows:

<head>
  <title>newroutetest</title>
</head>

<body>

</body>

<template name="home">
  <h1>Home</h1>
</template>

Then in the client/main.js add your client routes as follows:

import { Template } from 'meteor/templating';
import './main.html';

Router.route('/', {
  template: 'home'
});

Now we setup the server side route in the file server/main.js you add the route in the startup section as follows:

import { Meteor } from 'meteor/meteor';

Meteor.startup(() => {

  Router.route('/webhook', function () {
    var req = this.request;
    var res = this.response;
    res.end('hello from the server\n');
  }, {where: 'server'});

});

That's It I hope this helps others who have been struggling with this.