CODEWITHSUNDEEP
javascripthtmlmeteor
greedsin
greedsin

Reputation: 1272

Meteor HTML not rendered

I have the following structure in my meteor project

client/
    src/
        test1.js
        test2.js
    main.css
    main.js
    main.html
server/

The main.html f.e :

<head>
  <title>meteorTest</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}

</body>

<template name="hello">
    <canvas id="canvas"></canvas>
</template>

However the output is empty, which means wether the <h1> nor the canvas is displayed in the DOM. When i remove the src-Folder, the <h1> and the canvas are rendered.

What could be the problem?

Upvotes: 0

Views: 978

Answers (2)

NRiebesel
NRiebesel

Reputation: 317

I would structure your files like that:

 client/
     src/
         test1.js  // Since it seems working when you remove them,
         test2.js  // somethings seems wrong with their code. Maybe post it?
     helpers/
         body.js
     templates/
         body.html
         hello.html
     main.css
     main.js
     main.html 
 server/

With body.html:

<body>
  <h1>Welcome to Meteor!</h1>
  {{> hello}}
</body>

With hello.html:

<template name="hello">
   <canvas id="canvas"></canvas>
</template>

Then your javascript code in body.js:

import '../templates/body.html';
import '../templates/hello.html';

//All your JS code here or imports of other .js

Then in your client-root folder:

main.html:

<head>
  <title>meteorTest</title>
</head>

Lastly, all you'd have to put in your main.js file:

import './helpers/body.js'

Generally, it would make sense to have a seperate 'import' folder in the root of your project. You can declare server-side and client-side code that way, and be certain of what code is imported on server/client. Since your project seems more like a meteor test and you have no server code yet the structure above should do it for now.

Upvotes: 2

Yann
Yann

Reputation: 144

Put your head content in a head.html file No need for a body element. Replace it by a div instead, it will be rendered automatically in the body element by Meteor.

Upvotes: 1

Related Questions