Use Existing HTML Template - Not working when use with Iron Router

1

New to meteor and iron router. Hope can get some help.

I am trying to use the following template for a meteor application: https://shapebootstrap.net/item/1524991-oxygen-free-bootstrap-one-page-theme

However, i am stuck getting all the file structure in the correct way when combine with iron router.

Below are my files structure: Inside JS:

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

All the css inside “/client/css”

font, images and js under “/public”

in the main.html, if i did not add the below: at the top

<template name="main">

at the bottom

</template>

it work fine. But this kind of defeat the purpose of iron router because all the pages will load this html first. If i add the 2 tags above, seem like the js at the bottom of the html not loaded properly or not in proper sequence:

<script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="js/jquery.inview.min.js"></script>
  <script type="text/javascript" src="js/wow.min.js"></script>
  <script type="text/javascript" src="js/mousescroll.js"></script>
  <script type="text/javascript" src="js/smoothscroll.js"></script>
  <script type="text/javascript" src="js/jquery.countTo.js"></script>
  <script type="text/javascript" src="js/lightbox.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>

Any idea how should i fix this? thanks.

2

If I am understanding you correctly, you want to look into using a layout template. That way you don’t have to “repeat loading the layout html”, and you can define your route like so:

Router.route('main', {
    path: '/main',
    template: 'main',
    layoutTemplate: 'layout'
});

Have a read of this guide (layouts section) to read it in more detail.

3

Hi,
thanks for trying to help. Unfortunately my issue is not with layout. As you can see the template is a single page html, when i try to integrate the html template into meteor, if i did not add the below:

<template name="main">

the page load successfully, but if i add the template tag, the page cannot load successful anymore. This is the part i don’t understand, because i did not change any things, but hoping the iron-router to dynamic load the template base on the route because i want to add more pages later like login, register and etc.

To explain in more simple term is: i try to use existing html template with multiple css, multiple js (with load seq must be consider). It work before adding iron-router, after iron-router with the template tag, it break.

4

Ah ok, sorry. Maybe you are configuring the route wrong? I see that you named the template main but you call this.render('Main') in your code. Try configuring your route like this instead and see if it works?

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

<template name="main">
    <!-- html here -->
</template>
5

Hi, good catch, but unfortunately that is not the issue. It seem like really difficult to use existing html template on meteor.