How to add jquery with node project after installing with npm?

Question

I have installed jquery with npm (npm install jquery --save) and it added jquery to my node_modules folder. What path do I use for the script tag on the html page?

Here is what my directory structure looks like (only included what is necessary)

-Project Root
  -node_modules
      -jquery
          -dist
              -jquery.js
          -src
  -index.js
  -index.html
  -package.json

For socket.io it looks like this

<script src="/socket.io/socket.io.js"></script>

I tried this for jquery but it didn't work

<script src="/jquery/dist/jquery.js"></script>

Any help will be greatly appreciated! Thanks!

You would need to configure your server to serve the .js file at that location. Normally you have a public/ folder that contains static files so that you can easily just serve the whole folder. — user400654
– user400654, Commented Jul 29, 2015 at 14:45
You don't need a node module to use jQuery on the client side. Are you using anything like ExpressJs? And you really don't need to use jQuery on the backend side as most of what jQuery does is DOM manipulation. — khollenbeck
– khollenbeck, Commented Jul 29, 2015 at 14:58
I am using express. So I should just include it with a cdn? I'm new to this npm workflow. I assumed that you added everything like that. — billabrian6
– billabrian6, Commented Jul 29, 2015 at 15:12
You could use a CDN or you can create your own static directory in Express. This is where you would server your images, css, and client side JS from. — khollenbeck
– khollenbeck, Commented Jul 29, 2015 at 15:16

khollenbeck · Accepted Answer · 2015-07-29 15:13:48Z

3

You don't need to install a jQuery node module to run jQuery on the client side. You should be able to just load it from a public or static directory. For example,

Your project Structure

-Project Root
  -public
     -js
       jquery.js
  -node_modules
  -index.js
  -index.html
  -package.json

HTML

<!doctype html>
<html>
    <head>
        <script src="/socket.io/socket.io.js"></script>
        <script src="public/js/jquery.js"></script>
    </head>
    <body>
        ... stuff ...
    </body>
</html>

app.js

I am assuming you are using Express, like what is recommended in the Socket.IO getting started example. http://socket.io/get-started/chat/ So in your app.js you need to declare your public or static location. This will allow your index.html to access the files from within that folder.

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

Express serving static:

http://expressjs.com/starter/static-files.html

edited Jul 29, 2015 at 15:13

answered Jul 29, 2015 at 15:11

khollenbeck

16.2k18 gold badges68 silver badges102 bronze badges

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

5 Comments

billabrian6 Over a year ago

Thanks for clarifying. I will change it.

billabrian6 Over a year ago

Why are people down voting this post? I feel like I asked a legitimate question. I'm just trying to learn how all of this works, and I couldn't find anything that explicitly said how I should do it.

khollenbeck Over a year ago

@billabrian6, Sorry I couldn't tell ya. Sent an upvote your way to remove the downvote. Sometimes people are impatient and don't wait for the question to get hashed out a little better. Just my guess..

billabrian6 Over a year ago

Just not what I expect from this community. I've always had good experiences asking questions here, and I always try to include as much info as possible to enable someone to help me. Again, thanks for helping out!

khollenbeck Over a year ago

Sure no problem. Glad to help!

Collectives™ on Stack Overflow

How to add jquery with node project after installing with npm?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related