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

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.

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.

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.

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>

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