CODEWITHSUNDEEP
javascriptnode.jsexpressejs
Nikos Kalantas
Nikos Kalantas

Reputation: 105

How to use external javascript file into an ejs file

I'm working in a new web portal. So far using the express and node.js i have a server and some ejs files.

The body structure of my site is like this:

   - node modules
   - public
      --javascript
         ---myScript.js
   -views
      --pages
        ---index.ejs
        ---about.ejs
      --partials
        ---footer.ejs
        ---head.ejs
        ---header.ejs
    package.json
    server.js

server.js

var express = require('express');
var app = express();
app.set('view engine', 'ejs'); // set the view engine to ejs

app.get('/', function(req, res) {res.render('pages/index');}); // index page 
app.get('/about', function(req, res) {    res.render('pages/about');}); // about page 

app.listen(8080);
console.log('Portal is listening to port 8080 ');

and the index.ejs

<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
    <% include ../partials/header %>
</header>
<main>
<div class="jumbotron">
    <h1>MyPortal</h1>
        <button>Press</button>
    <% var test = 101; %>
    </div>
</main>
    <footer>
        <% include ../partials/footer %>
    </footer>
</body>
</html>

In the partials i want to call and use an external .js file /public/javascript/myScript.js so i can use variable from it in my ejs page or send a variable.

my js file have a simple function (just to see if it's working) that print in console if the button (in index.ejs) is pressed.

myScript.js

$(function() {
  $("button").on("click", function () {
  console.log("button pressed");
   });
  });

I'm trying to call the external js in head.ejs (or in index.ejs)...

<!-- views/partials/head.ejs -->
<meta charset="UTF-8">
<title>MyPortal</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>body    { padding-top:50px; } </style>

<script type="text/javascript" src="/pubic/javascript/myScript.js"></script>

but i'm getting this error (in console)

Loading failed for the <script> with source “http://localhost:8080/pubic/javascript/myScript.js”.

Any idea why this happens and how to solve it?

Upvotes: 2

Views: 10823

Answers (2)

ieniola
ieniola

Reputation: 1

Add this to your server.js file, app.use(express.static(__dirname + "/public");

And to link the js file with your ejs file,

Upvotes: 0

Quentin
Quentin

Reputation: 943142

Since you are trying to load client-side JavaScript, the fact you are using EJS is irrelevent. A standard HTML script element is all you need in the template, and you have that.

You do, however, need to provide a URL (with the src attribute) that the web browser can use to fetch the script … and your script has no URL.

You are getting the message Loading failed for the with source “http://localhost:8080/pubic/javascript/myScript.js”. because it is a 404 Error.

You should use the static module to provide the JS file with a URL.

app.use("/public", express.static('public'))

Upvotes: 2

Related Questions