Is it possible to link a node.js file to HTML?

Question

Very new to using html, I was wondering if it is possible to link a node file to HTML. I want to have a button which when clicked will run a function defined in the node file. I'm wondering if my node file has node packages if anything will go wrong. Anything helps!

The Node docs will tell you much of what you need to know. This might be a good place to start https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/ And MDN is great too https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML — Cat, Mar 08 '19 at 18:55
Node runs on the server, so the only way for this to work is via an HTTP request. Look up Ajax if you're not yet aware of it. — Robin Zigmond, Mar 08 '19 at 18:57
@RobinZigmond What you are saying is not wrong, but I think you may be missing what the OP is trying to do. It is possible to use node.js modules from within the browser, if they are written to allow that. — Duncan, Mar 08 '19 at 19:59
@Duncan - I agree that's (probably) what they want, but whether they can use the same file in the browser depends on what it does. If it's just a "vanilla" type JS library like eg. lodash, then yes that's fine - but if it involves Node-specific APIs (eg. to connect to a database or access the file system) then that can't be directly used in the browser. Certainly "Javascript is Javascript", but the browser and Node are completely different runtime environments and there are plenty of things that make sense in one but not the other. And HTTP is the only way to connect those two worlds. — Robin Zigmond, Mar 08 '19 at 20:04

Duncan · Answer 1 · 2019-03-08T20:02:33.937

I think you are trying to do something like the following: You have some code that is written to run in Node. Let's assume the code is contained in a file aModule.js. The question is, how do you invoke functions defined in that file from within the browser. And the second question is, will they run?

First, you can certainly import aModule.js into your browser just like any other javascript, using a script tag. Then you might be able to access the functions within the module, and they might run correctly in the browser. It all depends whether they were written with browser support in mind. I give an example below of one way (not the only way) that this can be done.

You will have to look at the particular code you are working with to see how you might be able to access it within the browser. Also, if the code is written to rely on features that are only available within node, you will have to do more work, probably modify the code, to get it to run.

At some point the "import" mechanism will be standardized so this will all get easier, but as of right now its a bit of a mess.

Here is an example of a module that will work in either node or in the browser.

// aModule.js - illustrates modularity that will work in browser or node  

"use strict";

var aModule = {}; // In browser, this will put aModule into global context

// "Closure" stops other stuff from being put into global context in browser
(function () {
    function getMessage() {
        return "Hello";
    }

    // other internal code not intended to be exposed can go here...
    // ...

    // and here is how we expose our getMessage function
    aModule.getMessage = getMessage;
})();

// If we are in node...
if (typeof module !== 'undefined' && module.exports) {
    // Export our module for use in node
    module.exports = aModule;
}

Here is how you access the functionality in node.js:

var aModule = require("./aModule.js");
console.log (aModule.getMessage());

And here is how you access it within the browser:

<!DOCTYPE html>
<html>
    <head>
        <title>Try out modularizing javascript in browser</title>
    </head>
    <body>
        <h2>Try modularization...</h2>
        <script src="aModule.js"></script> 
        <script>
            alert(aModule.getMessage());
        </script>
    </body>
</html>

One more tip - take a look at tools like Browserify. These are designed to convert node code into a form that can run in browser. Your mileage may vary.

Also see: https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node — Duncan, Mar 08 '19 at 20:06
thanks for your lengthy reply! I understand that I can link the js file to html but what if the js file has node packages. will there be any problems when this file containing node packages (from npm) is linked in the html? — begprog, Mar 08 '19 at 20:39

Is it possible to link a node.js file to HTML?

1 Answers1