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

Question

I cannot find a way to include external .js file to Node ejs template. I want to put logic and data into object in external .js file, include that file to index.ejs template

Answer 1

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

    
    
    
    <% if (typeof styles !== 'undefined') { %>
        <% if (styles.length > 0) { %>
            <% for (let style of styles) { %>
                
            <% } %>
        <% } %>
    <% } %>

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

<% if (typeof libs !== 'undefined') { %>
    <% for (let lib of libs) { %>
        
    <% } %>
<% } %>

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) { %>

<% } %>