Including JQuery in Client Side Node.js

Question

I'm learning node.js using express and have come across a topic thats giving me some trouble. Basically, once the user requests a webpage and the backend sends them the HTML webpage, if I want to include a javascript file to make that HTML page interactive, how would I exactly do that?

My backend looks like this:

var app = require('express')();
var server = require('http').Server(app);
var express = require('express');
server.listen(8080);
app.use(express.static(__dirname + '/views'));

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

and the HTML it sends looks like this:

<html>
    <head>
        <meta charset="UTF-8">
        <title>WebsiteMainPage</title>
    </head>
    <body>
        <h1>index.html</h1>
    </body>
</html>

Do I just add Jquery by linking up the source in the HTML to a public source like this?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Or do I have to do something special? For that matter how would I add a general javascript file that I wrote, not a library such as Jquery.

Edit: My project structure looks like this:

Project
   |
   |_____ backend.js
   |
   |_____ views
   |         |
   |         |_______ index.html
   |
   |_____ static
             |
             |_______ libs
                        |
                        |________jquery-1.12.1.min

Gilson PJ · Accepted Answer · 2016-03-09 06:55:46Z

7

Using CDN servers will the best option so that browser will cache your library files. and that will help your clients to reduce their page loading time.

If you want to use your own copy downloaded from your server, create a directory structure for example "static/libs/" and copy the jquery library inside that directory then make it as a static directory by

app.use(express.static(__dirname + '/static'));

then you can refer the jquery from your html page by

<script src="/libs/jquery/1.12.0/jquery.min.js"></script>

You can also make the node_module directory as static then all the node_module will be available to public and you can able to refer the jquery file from client side.

in a comment I saw that you have mentioned about npm jquery. When you do npm jquery, jquery will be installed as a node module and it will be available in node_module directory and using require('jquery') you can use jquery modules in the server side only. If you want to use the require('jquery') method in the client side you have to use requirejs or webpack etc .

edited Mar 9, 2016 at 6:55

answered Mar 9, 2016 at 6:44

Gilson PJ

3,6204 gold badges36 silver badges58 bronze badges

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

5 Comments

MarksCode Over a year ago

I see, that makes sense, thanks man! So you can do app.use() more than one time

MarksCode Over a year ago

Hey so I edited my question to add a representation of my directory structure and I was wondering if you could help me see if I implemented your suggestion correctly.

MarksCode Over a year ago

Basically in my index.html I added <script src="/libs/jquery-1.12.1.min.js"></script> and in my backend.js I added app.use(express.static(__dirname + '/static'));

MarksCode Over a year ago

Actually it seems to work, but instead of having my interactive javascript functions inside the html which could get messy I want to create a file called app.js and use jquery and stuff in there, so I'll try adding app.js to the libs/ folder and adding my functions there. So exciting!

Rinaldi Segecin Over a year ago

Gilson would I still need to add the "exprex.static" line to jquery inside the node_modules directory if I use webpack? or I could in this case expose the all path to jquery.js in the configuration of webpack without security issues?

Amulya Kashyap · Accepted Answer · 2016-03-09 06:59:26Z

1

Dear,

it's so simple just include the jquery file by using

<head><script src="/pathto/jquery.min.js"></script></head>

OR

add CDN in head tag of your index.html file

Create A folder named 'public' within root folder of your app.
Inside 'public' folder create 'js' name folder
Keep all js file within 'js folder'
Make changes in your app.js file like such

app.use(express.static(path.join(__dirname, 'public')));
Now just go to you index file and add CDN or your jquery file normally in HTML head tag.

Thanks & Cheers :)

edited Mar 9, 2016 at 6:59

answered Mar 9, 2016 at 6:39

Amulya Kashyap

2,3731 gold badge20 silver badges26 bronze badges

2 Comments

MarksCode Over a year ago

Thanks for the answer! I'm having trouble figuring out the path to the Jquery file, I used npm install jquery in the project root folder (I added a directory structure to my post for visualization). Maybe I'll actually get the source code an explicitly make a file called jquery.min.js and put it in the same directory as the html page

MarksCode Over a year ago

Thanks so much, I'll try that out! Gave you the check :)

Collectives™ on Stack Overflow

Including JQuery in Client Side Node.js

2 Answers 2

5 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Related