node.js - 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/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?

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./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?

Share Improve this question edited Mar 24, 2019 at 14:49 Shahbaz A. 4,3564 gold badges38 silver badges59 bronze badges asked Mar 24, 2019 at 10:19 Nikos Kalantas 1052 gold badges4 silver badges11 bronze badges

3 public was mistyped pubic – jro Commented Mar 24, 2019 at 10:29
yes i just show it... i change it to "public" but the problem remains – Nikos Kalantas Commented Mar 24, 2019 at 10:33
Could you open the url of the script in your browser and see if it shows anything? – jro Commented Mar 24, 2019 at 10:40
type="text/javascript" should not be used in HTML 5. It has no purpose other than to allow you to make a typo and break your script. – Quentin Commented Mar 24, 2019 at 10:40
niko try to add this app.use(express.static(path.join(__dirname, 'public'))); after setting the view engine. You also need to require path module var path = require('path'); – dimitris tseggenes Commented Mar 24, 2019 at 12:24

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

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'))

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

And to link the js file with your ejs file,

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

node.js - How to use external javascript file into an ejs file - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)