CODEWITHSUNDEEP
meteor
user3828000
user3828000

Reputation: 101

Need to include a helper html page in my meteor project

I have a helper.html page that I need to include in my Meteor app to assist with using an api. Looks like this.

<head>
  <script type="text/javascript" src="https://www.example.com/api-helper.js">      </script>
</head>
<body>
</body>

Right now I just have it in the root directory of my app. As it is now, here are the problems: the other api script which I have included in main.html, can't find the helper.html. Second, I get this error in the console: Error: Oh no! No route found for path: "/helper.html?. So my question is how do I properly include this helper html page into my Meteor project? Help greatly appreciated.

Thanks

Upvotes: 2

Views: 202

Answers (2)

saimeunt
saimeunt

Reputation: 22696

Error: Oh no! No route found for path: "/helper.html"

This is an error from iron:router, it's complaining that it can't find any route for path "helper.html".

I suppose you get this error message when typing directly http://localhost:3000/helper.html in your browser address bar, which is WRONG because this is not how iron:router is supposed to work.

iron:router manages pure client-side routing using HTML5 push state API contrary to classic server-side routing involved when requesting "/helper.html" to Apache or nginx means the server is going to send you an actual HTML response page displayed by the browser.

In Meteor "single-page apps", the server does not send any HTML responses to the client, it only sends data. It means that the routing takes place entirely in the client, the URL in the address bar gets parsed and iron:router provides utilities to respond accordingly, which usually involves rendering a different template based on which path (route) you hit.

I hope you really understand the difference in nature between these two approaches because this is very important to be aware of when developing with Meteor.

As far as your problem is concerned, I'll take DISQUS integration as an example which seems to be a similar issue.

DISQUS integration on standard PHP solutions is straightforward, you just need to copy-paste this so-called universal embed code :

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<example>'; // Required - Replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

This is fine because once a page gets sent to the client in a traditional website, javascript code gets executed once and we are done : if the user click on another page on the website, the all process of generating the HTML response, sending it to the client and executing JS code will be started from scratch.

However we can't just copy-paste this code inside a Meteor template, because Meteor webapps are "single-page apps", no page reloading process should ever happen in these type of websites.

When we navigate to another page in a Meteor app, the javascript context stays the same and we don't want the DISQUS script to reexecute. What we need to do instead is loading the script only once in the rendered callback of our template.

So we come up with the following Meteor template logic to integrate DISQUS comments loading :

<template name="disqus">
    <div id="disqus_thread"></div>
    <a href="http://disqus.com" class="dsq-brlink">
        blog comments powered by <span class="logo-disqus">Disqus</span>
    </a>
</template>

Template.disqus.rendered=function(){
    // assumes we get identifier and title as data context
    var identifier=this.data.identifier;
    var title=this.data.title;
    // we need a way to tell if the script has already been loaded or if it's
    // the first time, we can check for the existence of the DISQUS variable on
    // the global window object to make the difference
    if(window.DISQUS){
        // DISQUS API has our back, see this resource
        // https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
        window.DISQUS.reset({
            reload:true,
            config:function(){
                this.page.identifier=identifier;
                this.page.title=title;
            }
        });
    }
    else{
        // first initialization
        window.disqus_shortname = "disqus-shortname";
        window.disqus_identifier = identifier;
        window.disqus_title = title;
        window.disqus_developer = 1;
        // load the script via JS instead of embedding it in the HTML
        var script = $("<script>",{
            type:"text/javascript",
            async:true,
            src:"//" + disqus_shortname + ".disqus.com/embed.js"
        });
        $("head").append(script);
    }
};

This example demonstrates the way to go when you need to embed API code (google-analytics, DISQUS, etc...) in a Meteor website.

Upvotes: 1

Christian Fritz
Christian Fritz

Reputation: 21364

Just put your html file into a folder called public in the root folder.

Upvotes: 1

Related Questions