CODEWITHSUNDEEP
javascriptnode.jsnpm
Petter Sunde
Petter Sunde

Reputation: 3

Including node modules on my page

What's the best way of including a node module on my webpage?

Should I use absolute paths like <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> or is there an easier and better way of doing it?

Thank you.

Upvotes: 0

Views: 617

Answers (3)

rahil471
rahil471

Reputation: 314

My answer to this question would be a bit different and a little advance. Maybe it won't be helpful to you right now, but definitely, in future, it will. Also, it would help out others.

Yes, the first answer is absolutely correct, you can add a placeholder and then add links relative to it in your index file.

Now, are you using a task runner like gulp or grunt? If not I would recommend you to start using it, because you can cut out a lot of manual work use these tools and eventually save a heck load of time.

You might be thinking why am I talking about gulp or grunt over here. I will answer this questing shortly.

Since you are using node.js, you already know how modules are loaded in Node. eg : require('express');

What if we could use this approach for our client applications? You would only have to include one js file in your html and that js file would require all the other js libraries for you.

Great, suddenly you can reduce the number of script tags in your html page from approx around 20-30 to 1.

This is where module loaders come into picture.

But browsers do not understand the require statement.

To deal with this we use a tool called a browserify, we can use gulp(which I talked about earlier) to configure a task to browserify our files. When you use this, you will have to require all your js libraries and your own js files into a single file (say: app.js). But as we said browsers do not understand require. This is where browserify will take this app.js file pre process it and spit out a single file that should be included into your html.

You can follow this article to get a clear picture on how to achieve this. Scalable app using Gulp and browserify.

Pretty neat right! :)

Some of the other module loaders are System.js and webpack

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075925

Node modules are designed for server-side execution in the NodeJS environment, not for use in a browser. So the best way to include them in a web page is not to.

I will note that Bootstrap is a client-side framework, so it makes no sense as a NodeJS module in the first place.

If you're looking for an npm-like tool for client-side packages, the flavor of the week is Bower.

Upvotes: 0

Jonathan Nielsen
Jonathan Nielsen

Reputation: 1502

Add this in your app.js-file

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

This allows you to write:

<script src="/placeholder/bootstrap/dist/js/bootstrap.min.js"></script>

And Node will redirect that path to the node_modules folder.

You can change placeholder to whatever you want, mine is named scripts

Upvotes: 1

Related Questions