is there a way to add CSS/JS later using EJS with nodejs/express

Question

i'm using the EJS template engine with nodejs/express and i'm wondering if it's possible to add another css or js file in e.g the index.ejs (not the layout.ejs)

layout.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/stylesheets/smoothness/jquery-ui-1.8.14.custom.css' />
  </head>
  <body>
    <%- body %>
  </body>
</html>

index.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

i don't want to add the second css file in every template but only the index.ejs - is there any way i can do that?

Community · Accepted Answer · 2017-05-23 12:07:14Z

20

found a solution here: Node.js with Express: Importing client-side javascript using script tags in Jade views?

it's using jade instead of EJS but works all the same. here are some code-snippets for express 2.4.0.

you have to add the following "helpers" to your app.js

app.helpers({
  renderScriptsTags: function (all) {
    if (all != undefined) {
      return all.map(function(script) {
        return '<script src="/javascripts/' + script + '"></script>';
      }).join('\n ');
    }
    else {
      return '';
    }
  }
});

app.dynamicHelpers({
  scripts: function(req, res) {
    return ['jquery-1.5.1.min.js'];
  }
});

the layout.ejs looks sth like this:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
      <link rel='stylesheet' href='/stylesheets/style.css' />
      <%- renderScriptsTags(scripts) %>
  </head>
  <body>
    <%- body %>
  </body>
</html>

if you don't add any scripts to the scripts-array, only 'jquery-1.5.1.min.js' will be included - if you want to add files to a subpage you can do this like so:

test.ejs

<% scripts.push('jquery-ui-1.8.14.custom.min.js', 'jquery.validate.min.js') %>

<h1><%= title %></h1>
<p>I'm a template with 3 js files in the header</p>

that's it.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Jul 8, 2011 at 8:44

Philipp Kyeck

18.9k20 gold badges90 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Henrik Peinar Over a year ago

If you happen to have expressjs > 3.x.x read my answer below for working code. Credit goes to pkyeck ! :)

Community · Accepted Answer · 2017-05-23 11:59:54Z

11

As helpers and dynamicHelpers are gone in Express > 3, I rewrote pkyeck code so it works in Express 3.

So in app.js have this instead of the helpers / dynamicHelpers. Leave everything else as is.

app.locals({
    scripts: [],
  renderScriptsTags: function (all) {
    app.locals.scripts = [];
    if (all != undefined) {
      return all.map(function(script) {
        return '<script src="/javascripts/' + script + '"></script>';
      }).join('\n ');
    }
    else {
      return '';
    }
  },
  getScripts: function(req, res) {
    return scripts;
  }
});

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Nov 15, 2012 at 14:18

Henrik Peinar

2,20119 silver badges22 bronze badges

Comments

alditis · Accepted Answer · 2011-12-26 22:10:20Z

In app.js add line:

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public')); // This line.

In layout.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title>Authentication Example</title>
    <link rel="stylesheet" href="/stylesheets/style.css"/>
    <script src="/javascripts/jquery.js"></script>    
  </head>
  <body>
    <%- body %>
  </body>
</html>

In index.ejs or login.ejs:

<h1>Login</h1>
<form method="post" action="/login">
  <p>
    <label>Username:</label>
    <input type="text" name="username">
  </p>
  <p>
    <label>Password:</label>
    <input type="text" name="password">
  </p>
  <p>
    <input type="submit" value="Login">
  </p>
</form>
<script src="/javascripts/test.js"></script> <!-- Second Script -->

In test.js:

$(document).ready(function() {
    try{
        alert("Hi!!!");
    }catch(e)
    {
        alert("Error");
    }
});

Regards.

Mohsin Khan · Accepted Answer · 2017-12-28 09:31:42Z

Thanks @asprotte for providing this for express 4.x. Did you tested this? Because it does not appears to be working for me. So I have made some changes to your code here are they:

Put this in app.js file

app.locals.scripts = [];
app.locals.addScripts=function (all) {
app.locals.scripts = [];
    if (all != undefined) {
        app.locals.scripts =  all.map(function(script) {
            console.log(script);
            return "<script src='/js/" + script + "'></script>";
        }).join('\n ');
    }

};
app.locals.getScripts = function(req, res) {
    return app.locals.scripts;
};

then in template file put (I am using ejs template here) :

<% addScripts(['cart.js']) %>

Then in the layout file we need these to append at the bottom of the page get the scripts

<%- getScripts() %>

I have tested it and its working for me. Please correct me if I am wrong.

Thanks,

asprotte · Accepted Answer · 2015-02-20 11:09:37Z

1

Thanks for illustrating this option pkyeck!

In express 4.x app.locals is an object. Here's pkyeck's answer rewritten to work in express 4.x:

app.locals.scripts = [];
app.locals.addScripts=function (all) {
    app.locals.scripts = [];
    if (all != undefined) {
        return all.map(function(script) {
            return "<script src='/javascripts/" + script + "'></script>";
        }).join('\n ');
    }
    else {
        return '';
    }
};
app.locals.getScripts = function(req, res) {
    return scripts;
};

answered Feb 20, 2015 at 11:09

asprotte

1,1011 gold badge9 silver badges12 bronze badges

Collectives™ on Stack Overflow

is there a way to add CSS/JS later using EJS with nodejs/express

5 Answers 5

1 Comment

Comments

In app.js add line:

In layout.ejs:

In index.ejs or login.ejs:

In test.js:

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

In app.js add line:

In layout.ejs:

In index.ejs or login.ejs:

In test.js:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related