39

I have a node.js + express app and I installed jQuery with npm.

in the app.js file I used

var jquery = require('jquery');

In the html file header I included javascript that uses jQuery and I get `jQuery is not defined'. Is it a metter of order or am I missing something?

Jean-Philippe Bond
  • 10,089
  • 3
  • 34
  • 60
ilyo
  • 35,851
  • 46
  • 106
  • 159
  • Which header you're talking about? Can you post your javascript code? – Jean-Philippe Bond Jan 10 '13 at 19:23
  • 1
    The main question is why would you want to use jQuery with node? It runs a lot of code designed for old JavaScript specifications to be browser compatible. This can be interesting: [Reduction of CPU utilization on a nodejs server](http://stackoverflow.com/questions/14103617/reduction-of-cpu-utilization-on-a-nodejs-server/14112729) Most things you can do with jQuery on the server side, for example [Cloning an Object in Node.js](http://stackoverflow.com/questions/5055746/cloning-an-object-in-node-js/14280000#14280000), you can also do with Underscore. – esp Jan 11 '13 at 16:10
  • @esp What I didn't understan is that server and client use different jQuery files, I thought installing it with NPM will give me jQuery in client side – ilyo Jan 11 '13 at 16:19

5 Answers5

69

If you want a jquery npm module to be served by an express app then add this line to the server script (in your case app.js):

app.use('/jquery', express.static(__dirname + '/node_modules/jquery/dist/'));

After that you can include it in your html file:

<script src="/jquery/jquery.js"></script>
Lukasz Wiktor
  • 19,644
  • 5
  • 69
  • 82
  • 1
    It should be `app.use('/jquery', express.static(__dirname + '/node_modules/jquery/dist/'));` otherwise is 404 – Juan Picado May 25 '17 at 12:38
  • 1
    thanks ! the accepted answer is weird. alternatively `npm install serve-static` then `var serveStatic = require('serve-static')` and `app.use(serveStatic('node_modules...'))` – v.oddou May 21 '19 at 06:57
  • 2
    Great! Although I would recommend using `path.join(__dirname, 'node_modules', 'jquery', 'dist')` so that it works with platform specific delimiters, check out for a detailed explanation: https://stackoverflow.com/questions/9756567/do-you-need-to-use-path-join-in-node-js – Patrick Jun 27 '19 at 06:37
24

When you are installing jQuery with npm it's because you want to use jQuery on the server side of your application (Ex : in your app.js file). You still need to add jQuery to your web page like that :

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

If you want to use it on the client side. If you are using Jade, add the script tag to your template.

Jean-Philippe Bond
  • 10,089
  • 3
  • 34
  • 60
11

Way to use jquery from npm:

In app.js

app.use('/assets', [
    express.static(__dirname + '/node_modules/jquery/dist/'),
    express.static(__dirname + '/node_modules/materialize-css/dist/'),
    ...
]);

In layout template:

<script src="/assets/jquery.min.js"></script>
<script src="/assets/js/materialize.min.js"></script>

hope this code help you!

Dũng IT
  • 2,751
  • 30
  • 29
9

I'm using express 4.10.2. and I followed Lukasz Wiktor answer but it didn't work for me. I had to alter Lukasz solution a little bit:

app.use('/jquery', express.static(__dirname + '/node_modules/jquery/dist/'));

in the html file I also included:

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

So /jquery is the mounting point of the /node_modules/jquery/dist/ directory.

Costas Develop
  • 109
  • 1
  • 1
0

TO USE JQUERY IN NPM AND EXPRESS : You need to first download the jquery package

npm install jquery

For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes.

So you must now add the code snippet to your app.js:

const { JSDOM } = require( "jsdom" );
const { window } = new JSDOM( "" );
const $ = require( "jquery" )( window );

Also you must install jsdom package:

npm i jsdom

Since require is not defined in ES module scope, this file is being treated as an ES module because it has a '.js' file extension. So you must import the Nodejs module : "module" and then create a require function by call createRequire.

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

Add this code before using require.

Now create a separate .js file to store your jquery file that contains your program.

Now you must mount the static route to the directory of the .js file that contains your jquery program.

app.use(express.static("directory"));

Now in the (index.ejs) or your .ejs file, you need to add the script tag to link the .js file. Also to use jquery you must add its CDN to the program. Add the line of codes just before the closing body tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="query.js" charset="utf-8" type="text/javascript"></script>

Hope this helps you!!!

DIVYANSHU KAINTURA
  • 1
  • 1