How to include external .js file to ejs Node template page

I believe you are using it contrary to the intent. In a controller you can define external scripts and styles you want to include like so

      res.render('page-one', {
        title: 'Page One',
        data: pageData,
        libs: ['page-one', 'utils'],
        styles: ['page-one']
      });

In your static assets for your app you have a js folder and a css folder

            |- static/
               |- css/
               |- fonts/
               |- img/
               |- js/
               favicon.ico
            |- templates/

In your js folder you place the file page-one.js and utils.js In your css folder you place the file page-one.css

In the head section of your html in the ejs template

    <!-- styles included on all pages -->
    <link rel="stylesheet" href="/css/bootstrap.css">
    <!-- styles specific to individual pages -->
    <% if (typeof styles !== 'undefined') { %>
        <% if (styles.length > 0) { %>
            <% for (let style of styles) { %>
                <link rel="stylesheet" href="/css/<%= style %>.css">
            <% } %>
        <% } %>
    <% } %>

Typically it is best practice to include scripts at closing body tag so they don't block page render so before the closing body tag in your ejs file

<!-- scripts included on all pages -->
<script src='/js/libs/jquery.min.js' type='text/javascript'></script>

<!-- page specific scripts -->
<% if (typeof libs !== 'undefined') { %>
    <% for (let lib of libs) { %>
        <script src='/js/<%= lib %>.js' type='text/javascript'></script>
    <% } %>
<% } %>
</body>

When your page renders it will render the script and CSS includes automatically The if block is in case you don't define any includes in the controller. In your Express application you define your static and external script includes like so Remember up above we created js and css folders inside a directory named static

// Define static assets
app.use(express.static('static'));
// included on all pages
app.use('/js/libs', express.static(path.join(process.cwd(), 'node_modules/jquery/dist'), { maxAge: 31557600000 }));

Finally, if you absolutely must include JavaScript in your template like rendering JSON data, etc. using special ejs tag <%- %>

<% if (jsonData) { %>
<script id="jsonData">var jsonData=<%- JSON.stringify(jsonData) %>;</script>
<% } %>

You can't.

Note: You can only pass data from .ejs file to .js file but not the other way. It won't work because .ejs is rendered on the server side while .js runs on the client side. I am assuming you are using EJS on server side

1) You can pass an ejs variable value to a Javascript variable

    <% var test = 101; %> // variable created by ejs
    <script>
       var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers
       console.log(getTest);  // successfully prints 101 on browser
    </script>

2) You can't pass a js variable value to a ejs variable

Yes, you can't: if it is on server.

Why:

The EJS template will be rendered on the server before the js is started execution(it will start on browser), so there is no way going back to server and ask for some previous changes on the page which is already sent to the browser.


A workaround with Express:

myScripts.js

module.export = {
    foo() {},
    bar() {}
}

Then in your app.js

var myScripts = require('/path/to/myScripts');

res.render('template', {
    utils: myScripts
}); // you forgot a ')' here              

then in your template.ejs

// utils will act in global scope for this file
<%
  utils.foo();
  utils.bar();
%>

Tags:

Node.Js

Ejs