CODEWITHSUNDEEP
javascriptjquerynode.jsexpress
ilyo
ilyo

Reputation: 36391

how to use jQuery installed with npm in Express app?

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?

Upvotes: 39

Views: 45467

Answers (5)

DIVYANSHU KAINTURA
DIVYANSHU KAINTURA

Reputation: 1

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!!!

Upvotes: 0

Jean-Philippe Bond
Jean-Philippe Bond

Reputation: 10649

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.

Upvotes: 24

Dũng IT
Dũng IT

Reputation: 2999

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!

Upvotes: 11

Lukasz Wiktor
Lukasz Wiktor

Reputation: 20412

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>

Upvotes: 69

Costas Develop
Costas Develop

Reputation: 109

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.

Upvotes: 9

Related Questions