javascript - What is the proper way of referencing css and js files with handlebars?

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

My current project structure is like below

- test (root)
  -views
    -js
      -some JS files
    -css
      -some css files
    -layout
      -main.handlebars
  - servers.js (my server)

so I did following in my main.handlebars layout file

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="../css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="../js/{{this}}"></script>
    {{/each}}
</body>
</html>

And inside {{this}}, index.css goes in for css and index.js goes in for js.

But this gave Cannot GET 404 http://localhost:8000/js/index.js error. So I thought maybe handlebars look from the root somehow. so I tried

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="views/css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="views/js/{{this}}"></script>
    {{/each}}
</body>
</html>

But this gave Cannot GET 404 http://localhost:8000/views/js/index.js error when it looks to be the correct position of the file.

What is the correct way of referencing the js and css file in handlebars?

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

My current project structure is like below

- test (root)
  -views
    -js
      -some JS files
    -css
      -some css files
    -layout
      -main.handlebars
  - servers.js (my server)

so I did following in my main.handlebars layout file

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="../css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="../js/{{this}}"></script>
    {{/each}}
</body>
</html>

And inside {{this}}, index.css goes in for css and index.js goes in for js.

But this gave Cannot GET 404 http://localhost:8000/js/index.js error. So I thought maybe handlebars look from the root somehow. so I tried

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="views/css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="views/js/{{this}}"></script>
    {{/each}}
</body>
</html>

But this gave Cannot GET 404 http://localhost:8000/views/js/index.js error when it looks to be the correct position of the file.

What is the correct way of referencing the js and css file in handlebars?

Share Improve this question asked Jul 30, 2017 at 3:02 forJ 4,6176 gold badges39 silver badges67 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 22

You should create the public directory and in the server, you can serve static files such as images, fonts, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

app.use(express.static(path.join(__dirname, '/public')));

Now, you can load the files that are in the public directory:

<!Doctype html>
<html>
<head>
    <title></title>
    {{#each css}}
        <link rel="stylesheet" href="/css/{{this}}">
    {{/each}}
</head>
<body>
    {{{body}}}
    {{#each js}}
        <script src="/js/{{this}}"></script>
    {{/each}}
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - What is the proper way of referencing css and js files with handlebars? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)