CODEWITHSUNDEEP
javascriptnode.jsexpresspug
Robert Oschler
Robert Oschler

Reputation: 14375

Jade template in Node.JS/Express app can't find external Javascript file?

I have a Node.JS/Express app that uses the Jade template engine. I have a Javascript file that is in the directory immediately above my views directory that contains my Jade views. Given the code below, I believe that the view should be able to find referenced server-side Javascript file named common_routines, but when the view is requested I get a 404 error saying that the external Javascript file could not be found. This confuses me because I thought Jade templates execute server side, so why would this trigger a 404 error from the Jade render() call?

Here is the Jade view:

block content
    script(src="../common_routines.js")
    div(style="padding:5px")
        h4 #{product.name}
    if (product.brand != null)
        p Brand: #{product.brand}
    div(class="img_and_desc")
        img(src=product.imageUrl, class="product_image", align="left")
        if (product.minimumPrice == product.maximumPrice)
            p Price: #[strong #{product.minimumPrice}]
        else
            p Price: #[strong #{product.minimumPrice}] to #[strong #{product.maximumPrice}]
        if (product.cashBack > 0)
            p Cash Back amount: #[strong #{product.cashBack}]
        if (product.freeShipping)
            p(class="text-emphasized-1") *Free Shipping!
        if (product.onSale)
            p(class="text-emphasized-2") Discounted Item

Here is a snippet of the call from the route file that renders the view, where the if (err) branch is triggered:

           res.render(
                'ajax-product-details',
                locals,
                function (err, html) {
                    if (err)
                    // A rendering error occurred.
                        throw new Error("Rendering error(type:" + err.type + ", message: " + err.message);
                    else {
                        // Success. Send back the rendered HTML.
                        res.send(html);
                        return;
                    }
                });

Here is the error I see in the WebStorm debugger Console window pane. Notice that it shows the file reference as /common_routines.js without the preceding ".." relative directory reference, despite the fact that preceding ".." relative directory reference is plainly visible in the Jade file reference ("script(src="../common_routines.js")):

[Express][127.0.0.1][GET][DESKTOP] 2016-07-20T10:07:34.940Z /common_routines.js?_=1469009245957
(development error handler) Status code(404) message: Not Found

Here is the common_routines.js content:

function truncateString(str, maxLen)
{
    if (str.length > maxLen)
        return str.substring(0, maxLen - 1) + '&hellip';
    return str;
}

module.exports =
{
    truncateString: truncateString
}

As I said, common_routines.js is in the directory immediately above the Jade view, so is this external file reference invalid for some reason?:

script(src="../common_routines.js")

Upvotes: 1

Views: 1553

Answers (1)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

You can only reference static files that are in your public folder(if you have set your static assets to be served from that folder, as you have), on your front-end side. You can put your common_routines.js file in a folder inside public e.g. public/js/. Now, you can reference this in your view file using script(src="/js/common_routines.js")

In case, you want to use the functions in your jade file, not on front-end js files, you need to include that as a package using var commonRoutines = require('../common_routines.js'); inside your server side js file. Now, you can pass this object variable along with your context object to your view file. As you stated, you pass locals object to your view file while rendering, you can do it like:

var common_routines = require('../common_routines.js');
var locals = { common_routines: common_routines };
res.render( 'ajax-product-details', locals);

Now, you can use functions from common_routines.js in your ajax-product-details file.

Upvotes: 3

Related Questions