title: What is the proper way of referencing css and js files with handlebars?
body: <p>I am currently using express and handlebars for my project. It is my first time of using handlebars and I cannot figure out how to properly reference the position of my css and js files</p>
  
  <p>My current project structure is like below</p>
  
  <pre><code>- test (root)
    -views
      -js
        -some JS files
      -css
        -some css files
      -layout
        -main.handlebars
    - servers.js (my server)
  </code></pre>
  
  <p>so I did following in my main.handlebars layout file</p>
  
  <pre><code>&lt;!Doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      {{#each css}}
          &lt;link rel="stylesheet" href="../css/{{this}}"&gt;
      {{/each}}
  &lt;/head&gt;
  &lt;body&gt;
      {{{body}}}
      {{#each js}}
          &lt;script src="../js/{{this}}"&gt;&lt;/script&gt;
      {{/each}}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And inside <code>{{this}}</code>, index.css goes in for css and index.js goes in for js.</p>
  
  <p>But this gave <code>Cannot GET 404 http://localhost:8000/js/index.js</code> error. So I thought maybe handlebars look from the root somehow. so I tried</p>
  
  <pre><code>&lt;!Doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      {{#each css}}
          &lt;link rel="stylesheet" href="views/css/{{this}}"&gt;
      {{/each}}
  &lt;/head&gt;
  &lt;body&gt;
      {{{body}}}
      {{#each js}}
          &lt;script src="views/js/{{this}}"&gt;&lt;/script&gt;
      {{/each}}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But this gave <code>Cannot GET 404 http://localhost:8000/views/js/index.js</code> error when it looks to be the correct position of the file.</p>
  
  <p>What is the correct way of referencing the js and css file in handlebars?</p>