What is the proper way of referencing css and js files with handlebars? : <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>
