Develop Reference

How to use Node.js packages within a client-side html document using browserify

I'm unable to use a node.js module on my website with broweserify. The example only shows how to run a javascript file that is separate from the .html file, not how to use the node.js module within the .html file. Seems like a trivial problem, but I'm unable to make it work.
Here's what I've done:
Initialized node.js & installed a package, npm i webtorrent-health as an example
Created require_stuff.js which consists of a single line: var WebtorrentHealth = require('webtorrent-health')
Run browserify: browserify require_stuff.js > bundle.js
Include package in my html document, e.g. <script src='bundle.js'></script>
Use the package somewhere in my document, e.g. like this: <script>webtorrentHealth(magnet).then(foobazbar())</script>
Despite bundle.js executing and seemingly defining webtorrentHealth, the script within the .html document fails with WebtorrentHealth is not defined. What am I doing wrong? How do I make it work? Thank you!

You're very close to what you want to achieve. In fact, your code bundle.js is inaccessible from outside (in your case the browser) due to browserify, but you can expose your module by writing at the end of your file require_stuff.js:
window.WebtorrentHealth = WebtorrentHealth;
Now you can use WebtorrentHealth in your document.

grunt undefined Method error?

I have an Angular App that uses grunt to build and minify. I have imported one library in index.html like this: <script type="text/javascript"> java script code </script> between the header tag. It is supposed to make the methods of that library globally available though my application. The problem is that when I run grunt to build my application, grunt doesn't recognize the method of that library. What should I do to fix it?
The error I get in grunt is: 'the method I used' is undefined.

Use /* global name of the method*/ at the top of the file where grunt gives you undefined error. it will make that method globally available. so you don't need to be worried about it.

Passing data between javascript

Want to link one javascript file in index and exports it function to another javascript file
Index.html
<script src="test.js"></script>
test.js
var config = {};
config.server_ip = "127.0.0.1";
module.exports = config; //Error, module not defined
console.log("Hello World, I should be showing up in chrome console");
show.js
var config = require('./test');
console.log(config);
I want to run index.html and at the same time using node.js to run my show.js file.
Apparently I can only choose one, if I do not export, my console.log works, if i export, my console.log do not work.
Is there any other method to pass data like this?
Do note that the workflow has to be like this, and I do not want to link 2 javascript file into my index.html
I tried using import and export function via mozila guide, however it seems that chrome does not support that as well.

I want to run index.html and at the same time using node.js to run my show.js file.
If you want to use NodeJS to run the JavaScript, then you have to actually run it on NodeJS.
If you are loading the script through a <script> element in an HTML document then you are running it in the browser and not NodeJS (it is possible that you are using NodeJS to run a webserver that supplies the .js file to the browser as a static file, but that isn't the same as running it on NodeJS).
console.log("Hello World, I should be showing up in chrome console");
If you want to display something in the Chrome console then you need to run it browser-side and not in NodeJS.
Browsers don't have native support for AMD style modules, so to use the approach you are taking you would need to add something like RequireJS.

Script listed in Jade not accessible in my JavaScript

In running an express app, the Jade template includes two script lines:
script(src="https://cdn.socket.io/socket.io-1.3.5.js") <== library
script(src="main.js") <== my code
But when I call something defined in the first script from my JavaScript in main.js, I get the error:
Uncaught TypeError: Cannot read property 'connect' of undefined
The offending line is this one:
var io = io.connect();
Which is defined in the first socket.io script. How can I include that script in a way that my code in main,js can find it?
If this was server side, I'd just 'require' it.

Try this version
https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.js
https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js
Socket io use browserify in order to compile the script into one file.
Probably the version you use is corrupt.
If this doesn't solve, try to use the npm socket-io.client lib.
npm install --save socket.io
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
Translate this into jade.

Regarding accessing the io javascript
You can check in your developer tools in network or console tab to find if the socket js is loading in your templates.
you can install it with node:
npm install socket.io
var io = require('socket.io')(80);
Other than that you can go directly to this page https://cdn.socket.io/socket.io-1.3.5.js and copy the code from that page into a local js file (socket.js or whatever you'd like to call it) and then require it as you would any other file.
Or find a different cdn to try and access it from.
Regarding the error you are getting
Have you defined io anywhere?

Use Browserify with JavaScript libraries such as Backbone or Underscore?

I know I can install underscore using npm but that's not what I can do in my work environment. I need to be able to download the Underscore.js library and then make it "browserify-compatible".
So let's assume Underscore.js looks something like this:
(function() {
var root = this;
// Rest of the code
}.call(this));
I downloaded that file on my hard drive and saved it as under.js.
My file that requires underscore looks like this:
var underscore = require("./under");
console.log(underscore);
And then I run browserify from the cli.
I have an HTML page called test.html and basically all it does is load the generated bundle.js.
However, the console.log(underscore) line fails - says that underscore is undefined.
What have I tried?
Obviously I added module.exports to the first line - right before the function definition in under.js, and that's how I got the error mentioned above. I also tried the method from this answer , still got the same error.
So, how would I use Browserify to load libraries such as Underscore.js or Backbone without using npm-installed modules?

That's because browserify does not add variables to the global scope. The version you download is identical to the version that you install via NPM.
You need to explicitly attach it to the window to export it to the top level scope.
If you create a file called "expose_underscore.js" and put this in it:
var _ = require('./under');
window._ = _;
Will do it, followed by: browserify expose_underscore.js > bundle.js and then add bundle.js as a <script> tag you will be able to do the following in your console:
HOWEVER, you shouldn't do this if you're using browserify. The point behind it (and Node's version of commonJS) is that you explicitly require it everywhere you need it. So every file you have that needs underscore should import it to a local variable.
Don't worry -- you will still only have one copy loaded.

I typically add my vendor libs like Underscore as script tags. Underscore will attach itself to the global scope, so then you don't need to require it anywhere to use it.
If you do want to use it in a Browserified fashion, verify that you have the correct path in your require statement (browserify requires are relative paths) and move the module.exports statement to the end of the file.